如何在按钮内垂直对齐Google图标？ （IE11）

Question

我在按钮内部的某些谷歌图标垂直对齐方面遇到了麻烦。我尝试使用填充和边距，但我无法解决问题。

这是问题的屏幕截图：正如您所看到的，图标位置略高：

这是html的一部分，每个按钮或多或少相同：

private void Contact_Checked(object sender, RoutedEventArgs e)
{
    var contact = (sender as CheckBox).DataContext as CheckedListItem<Model.Contact>;

    Task.Factory.StartNew(() =>
    {
        ContactController.GetLeagues(contact);
    })
    .ContinueWith((prevTask) =>
    {
        CheckTaskException(prevTask);
    });
}

这是按钮的css：

<div id="mainToolbar">
    <button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
        <i class="material-icons">brush</i>
    </button>
</div>

最后是div的css：

.button {

    margin: auto;
    display: inline-block;
    margin-top: 5px;

    color: black;
    border: 0px solid grey;
    border-radius: 6px;

    background-color: #EFEFEF;

    text-align: center;
    text-decoration: none;
    cursor: pointer;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 4;
    vertical-align: middle;

}

.button {
    width: 50px;
    height: 40px;
}

.button:hover {
    background-color: #aaaaaa !important;
    color: white !important;
}

如何将图标放在按钮中间（垂直和水平）？感谢。

Answer 1

您可以使用绝对定位和翻译将图标放在中间位置。请务必在position:relative上添加button，以便图标位于按钮上。

＆＃13;

＆＃13;

.button {

    margin: auto;
    display: inline-block;
    margin-top: 5px;

    color: black;
    border: 0px solid grey;
    border-radius: 6px;

    background-color: #EFEFEF;

    text-align: center;
    text-decoration: none;
    cursor: pointer;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 4;
    vertical-align: middle;
    
}

.button {
    width: 50px;
    height: 40px;
    position: relative;
}

.button:hover {
    background-color: #aaaaaa !important;
    color: white !important;
}

.button:active i{
    /*for push effect on click*/
    transform: translate(-45%, -45%);
}

.button i {
  /*horizontal and vertical centering*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#mainToolbar {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 520px;
    width: 60px;
    z-index: 10;
    text-align: center;

}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div id="mainToolbar">
    <button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
        <i class="material-icons">brush</i>
    </button>
</div>

＆＃13;

＆＃13;

＆＃13;

解释： 带有top:50%的{​​{1}}会将图标移动到父亲高度的50％。使用-50％的translateY会将图标向上移动一半高度，使其在中间对齐。与水平居中相似。

Answer 2

其工作正常参见摘录

＆＃13;

＆＃13;

.button {

    margin: auto;
    display: inline-block;
    margin-top: 5px;

    color: black;
    border: 0px solid grey;
    border-radius: 6px;

    background-color: #EFEFEF;

    text-align: center;
    text-decoration: none;
    cursor: pointer;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 4;
    vertical-align: middle;

}

.button {
    width: 50px;
    height: 40px;
}

.button:hover {
    background-color: #aaaaaa !important;
    color: white !important;
}
And finally the css for the div:

#mainToolbar {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 520px;
    width: 60px;
    z-index: 10;
    text-align: center;

}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="mainToolbar">
    <button id="buttonPencil" data-tool="yes" data-type="draw" title="Use pencil" class="button" onclick="changeTool(0);">
        <i class="fa fa-leaf"></i>
    </button>
</div>

＆＃13;

＆＃13;

＆＃13;