問題描述

比如一個(gè)普通的按鈕，要做到文字垂直居中

<a>按鈕</a>

css設(shè)置為：

a { height: 30px; line-height: 30px; font-size: 14px; text-align: center; width: 70px; vertical-align: middle;}

在chrome上和ios上沒有問題，但是在安卓上文字就會(huì)明顯偏上，如圖

試過用table-cell或者line-height設(shè)為1,然后用padding來(lái)控制高度等方法，都不行，都是偏上的，這個(gè)問題怎么解決啊？

問題解答

這么巧前段時(shí)間我也碰到了一樣的問題，

解決方法：使用 flex 布局。

把父元素設(shè)為：

display: flex;align-items: center;justify-content: center;

使用 autoprefixer 加上前綴以后沒有任何兼容性問題。

a元素是行內(nèi)元素，得設(shè)置為塊級(jí)元素，設(shè)置的height line-height才起作用

f12調(diào)一下，把安卓的一些默認(rèn)樣式覆蓋掉

這個(gè)，反正我是設(shè)置line-height和height一樣，就會(huì)上下居中。不過，看你這個(gè)a好像也可以用button代替，button里面的文字自動(dòng)上下左右居中

這是在特殊的瀏覽器才會(huì)出現(xiàn)這個(gè)問題吧，是line-height導(dǎo)致的，就用flex布局來(lái)替代