html - 如何在按钮内垂直对齐Google图标？ (即11)

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

这是问题的屏幕截图：如您所见，图标位于稍高的位置：



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

<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>

这是该按钮的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;
}

最后是div的CSS：

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

}

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

最佳答案

您可以将绝对定位与平移一起使用，以将图标定位在中间。确保在position:relative上添加button，以使图标在不带按钮的位置。

.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;

}

<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>

解释：
带有top:50%的position: absolute会将图标向下移动父母的高度的50％。值为-50％的translateY将图标向上移动一半高度，以使图标在中间居中对齐。水平居中类似。

关于html - 如何在按钮内垂直对齐Google图标？ (即11)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49363742/