鍍金池/ 問答/HTML5  網(wǎng)絡(luò)安全  HTML/ button 裡面有個(gè) <i> 能怎麼文字和其水平垂直置中？

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

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

我使用谷歌的 material icon
只是導(dǎo)致我文字會(huì)在下面，icon顯得大

clipboard.png

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

回答
編輯回答
吢丕

vertical-align: middle

2018年9月3日 08:54
編輯回答
傻丟丟

對i標(biāo)簽設(shè)置vertical-align: middle樣式看看有沒有用

2018年3月12日 08:39
編輯回答
硬扛

我常用的方法是直接給這個(gè)i標(biāo)簽設(shè)置position:relative; top:3px;

2017年5月8日 16:41
編輯回答
小曖昧

文字 居中 用line-height 和button的height一樣，文字就在button垂直居中，
要使的底部和文字底部對齊，最好還要使文字和圖標(biāo)的大小看起來匹配
我常用方法， 可以用float 定位，也可以用flex布局

2017年5月2日 05:43
編輯回答
孤毒

給button設(shè)置一個(gè)height，給文字設(shè)置相同的line-height

    <style>
        button {
            height: 100px;
        }

        span {
            line-height: 100px;
        }
    </style>
    <button>
        <span>儲(chǔ)存至最愛</span>
        <i class="material-icons">
            favorite_border
        </i>
    </button>
2017年11月2日 11:34