css - 如何解决安卓上按钮文字偏上的问题

Question

比如一个普通的按钮，要做到文字垂直居中

<a>按钮</a>

css设置为：

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

在chrome上和ios上没有问题，但是在安卓上文字就会明显偏上，如图

试过用table-cell或者line-height设为1,然后用padding来控制高度等方法，都不行，都是偏上的，这个问题怎么解决啊？

Answer 1

這麼巧前段時間我也碰到了一樣的問題，

解決方法：使用 flex 版面。

把父元素設為：

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

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

Answer 2

a元素是行內元素，得設定為區塊級元素，設定的height line-height才起作用

Answer 3

f12調一下，把安卓的一些預設樣式覆蓋掉

Answer 4

這個，反正我是設定line-height和height一樣，就會上下居中。不過，看你這個a好像也可以用button代替，button裡面的文字自動上下左右居中

Answer 5

這是在特殊的瀏覽器才會出現這個問題吧，是line-height導致的，就用flex版面來取代