问题描述
最近在做一个安卓平板的项目，开发模式是混合开发，即原生 APP 中内嵌 H5 网页。文字垂直居中使用的是 height + line-height 组合，在 PC 上效果一直是好的，我手上开发用的安卓平板上效果也是好的。昨天领导拿过来一个华为平板对我说：“文字怎么不是垂直居中”。我一看，还真是。
“在我电脑上是好的啊！”
初始方案：line-height 实现文字垂直居中
Hello World .content { display: inline-block; width: 120px; font-size: 14px; height: 36px; line-height: 36px; text-align: center; background-color: cornflowerblue; }
这种方案在 PC 上显示都是正常的，在安卓平板上文字会偏移。
查找资料后，验证后发现下面这种解决方案有效。
修改后方案：flex 实现文字垂直居中
Hello World .content { display: flex; /* flex 布局 */ width: 120px; height: 36px; align-items: center; /* 文字垂直居中 */ text-align: center; justify-content: center; /* 一行文字的时候 text-align 无效 */ background-color: cornflowerblue; }
郑重声明：本文内容及图片均整理自互联网，不代表本站立场，版权归原作者所有，如有侵权请联系管理员(admin#wlmqw.com)删除。
