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

文章专题 AI工具学习下载问答源码最近更新

PHP

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

怪我咯 2017-04-17 11:48:07

[CSS3讨论组]

828

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

<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来控制高度等方法，都不行，都是偏上的，这个问题怎么解决啊？

怪我咯

走同样的路，发现不同的人生

全部回复(5)

迷茫2017-04-17 11:50:07 5楼

这么巧前段时间我也碰到了一样的问题，

解决方法：使用 flex 布局。

把父元素设为：

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

使用 autoprefixer 加上前缀以后没有任何兼容性问题。

赞 +0

添加回复

怪我咯2017-04-17 11:50:07 4楼

a元素是行内元素，得设置为块级元素，设置的height line-height才起作用

赞 +0

添加回复

迷茫2017-04-17 11:50:07 3楼

f12调一下，把安卓的一些默认样式覆盖掉

赞 +0

添加回复

高洛峰2017-04-17 11:50:07 2楼

这个，反正我是设置line-height和height一样，就会上下居中。不过，看你这个a好像也可以用button代替，button里面的文字自动上下左右居中

赞 +0

添加回复

迷茫2017-04-17 11:50:07 1楼

这是在特殊的浏览器才会出现这个问题吧，是line-height导致的，就用flex布局来替代

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>