问题:在元素中文字小于12px时并且元素当中的上下内边距过小时,安卓的浏览器会出现显示问题,
“我是挑战者”在安卓手机上明显的不垂直居中,如下图所示
解决办法:
1.将该元素中所有关于px的样式放大一倍再缩小一倍,如下图“.is-user”中所示(实现的效果如上图中的“我是版主”所示)
2.将该元素改为flex布局,但是实际操作完成后效果不理想,稍微有点偏上
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
*****多加一个子元素是个很好的解决办法*****
<div class="is-user">
<span>我是版主</span>
</div>
.is-user {
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #fff;
width: 100px;
height: 50px;
border-radius: 25px;
background-color: orange;
}
3.将该元素改为table布局,将该元素外围加上一个table盒子,实现效果的代码如下,实现的效果和第二种差不多,稍微有点偏上
.container {
display: table;
.is-not-user {
display: table-cell;
vertical-align: middle;
}
}
4.直接用不给元素高度用padding-top以及padding-bottom来实现垂直居中,实现的效果和第二种差不多,稍微有点偏上
5.如果是这种标签式的元素,文字基本不改变时,这种情况建议直接使用svg等图片代替