css文字居中问题

Question

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

Answer 1

不用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;
}

Answer 2

你用的是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;

Answer 3

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