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

Question

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

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

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

Answer 1

vertical-align: middle

Answer 2

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

Answer 3

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

Answer 4

给button设置一个height，给文字设置相同的line-height

    <style>
        button {
            height: 100px;
        }

        span {
            line-height: 100px;
        }
    </style>
    <button>
        <span>儲存至最愛</span>
        <i class="material-icons">
            favorite_border
        </i>
    </button>

Answer 5

我常用的方法是直接给这个i标签设置position:relative; top:3px;