button 裡面有個 <i> 能怎麼文字和其水平垂直置中？

Question

<button>儲存至最愛 <i class="material-icons">
        favorite_border        </i>
</button>

我使用谷歌的 material icon
只是導致我文字會在下面，icon顯得大

如何使其文字能夠垂直置中？

Answer 1

文字 居中 用line-height 和button的height一样，文字就在button垂直居中，要使的底部和文字底部对齐，最好还要使文字和图标的大小看起来匹配我常用方法， 可以用float 定位，也可以用flex布局

Answer 2

对i标签设置vertical-align: middle样式看看有没有用

Answer 3

字可以用span包住 然后button>*{vertical-align: middle}