如何垂直对齐按钮内的谷歌图标？ （即11）

Question

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

这是问题的截图：如您所见，图标位置略高：

这是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;

}

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

Answer 1

您可以使用绝对定位和平移来将图标定位在中间。请务必在button 上添加position:relative，以便图标位于按钮的右侧。

.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 会将图标向上移动一半高度，使其在中间对齐。与水平居中类似。

Answer 2

它的工作正常见 sn-p

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

}

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