问题描述最近在做一个Android/ target=_blank class=infotextkey>安卓平板的项目，开发模式是混合开发，即原生 App 中内嵌 H5 网页 。文字垂直居中使用的是 height + line-height 组合，在 PC 上效果一直是好的，我手上开发用的安卓平板上效果也是好的 。昨天领导拿过来一个华为平板对我说：“文字怎么不是垂直居中” 。我一看，还真是 。
【Android浏览器下line-height垂直居中偏离解决方案】“在我电脑上是好的啊！”
初始方案：line-height 实现文字垂直居中<span class="content">Hello World</span><style>.content {display: inline-block;width: 120px;font-size: 14px;height: 36px;line-height: 36px;text-align: center;background-color: cornflowerblue;}</style>这种方案在 PC 上显示都是正常的，在安卓平板上文字会偏移 。
查找资料后，验证后发现下面这种解决方案有效 。
修改后方案：flex 实现文字垂直居中<span class="content">Hello World</span><style>.content {display: flex; /* flex 布局 */width: 120px;height: 36px;align-items: center; /* 文字垂直居中 */text-align: center;justify-content: center;/* 一行文字的时候 text-align 无效 */background-color: cornflowerblue;}</style>
推荐阅读
- 阿里+腾讯资深架构师方案-高并发系统下的服务治理
- 配电箱你确定不从“根”上了解下一我吗？
- 安庆绪被谁杀的,安禄山儿子安庆绪什么下场-
- 南瓜花如何吃法,南瓜花能不能吃!请教一下-
- 周星驰一下子老了,周星驰为什么变那么老-
- 安卓|基于Android 13定制 OPPO ColorOS 13曝光：彻底解决杀后台问题
- 苹果|iPhone耗电越来越快 四招教你如何延缓电池健康的下降
- 为什么佛教起源于印度但没在印度流传下来,印度是佛教的发源地为什么印度没有佛教-
- 冰箱下层为什么会结冰严重 冰箱下层结冰严重是什么原因
- 奥奇传说手游破阵天下的攻略是什么？