css文字居中问题

图片描述

如上如,一个列表渲染出来的东西有些不是垂直居中的,安卓微信浏览器里的效果,
目前使用inline-flex + align-items: center;
这个问题怎么解决?

阅读 2.8k
3 个回答

不用flex布局

设置

<div class="testDiv">
    <span><img src="../icon.png"/></span>
    <span>程医生</span>
    <span><button>公开课</button></span>
</div>
.testDiv:after{
    content:"";
    width:0;
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.testDiv>span{
    display:inline-block;
    vertical-align:middle;
    line-height:1;
}

你用的是display:flex;布局吧.有一些浏览器不支持.有个属性叫display:webkit-box;直接用autoproxy做兼容处理

display:-webkit-box;

display:-ms-flexbox;

display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
        align-items: center;

查了一下,好像是字体小于12像素时浏览器的一个渲染bug,暂时还没有找到好的解决办法。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题