使文本显示在按钮的中间

Question

当我使用

时

<button id="kh_send_comment">
    <i class="material-icons">done</i> 
    Save
</button>

单词Save的位置位于按钮的底部。我希望它在它的中间。如何在不改变字体大小的情况下执行此操作？

https://jsfiddle.net/ba3vg9k8/

Answer 1

使用此CSS：

button i { vertical-align: middle }

https://jsfiddle.net/bgr3a1oL/1/

Answer 2

原因是按钮环绕较大的图标，这会增加按钮的高度并使文本保持在底部。

您可以为图标的vertical-align设置一个像素值，以使文本准确到达您想要的位置。

button i { vertical-align: -7px }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<button id="kh_send_comment"><i class="material-icons">done</i> Save</button>

Answer 3

将vertical-align: middle;添加到i元素。