安卓手机浏览器兼容文字的垂直居中问题

时间:2024-03-30 10:46:56

问题:在元素中文字小于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等图片代替