問題描述
最近在做一個(gè)安卓平板的項(xiàng)目，開發(fā)模式是混合開發(fā)，即原生 APP 中內(nèi)嵌 H5 網(wǎng)頁。文字垂直居中使用的是 height + line-height 組合，在 PC 上效果一直是好的，我手上開發(fā)用的安卓平板上效果也是好的。昨天領(lǐng)導(dǎo)拿過來一個(gè)華為平板對(duì)我說：“文字怎么不是垂直居中”。我一看，還真是。
“在我電腦上是好的啊！”
初始方案：line-height 實(shí)現(xiàn)文字垂直居中
Hello World .content { display: inline-block; width: 120px; font-size: 14px; height: 36px; line-height: 36px; text-align: center; background-color: cornflowerblue; }
這種方案在 PC 上顯示都是正常的，在安卓平板上文字會(huì)偏移。
查找資料后，驗(yàn)證后發(fā)現(xiàn)下面這種解決方案有效。
修改后方案：flex 實(shí)現(xiàn)文字垂直居中
Hello World .content { display: flex; /* flex 布局 */ width: 120px; height: 36px; align-items: center; /* 文字垂直居中 */ text-align: center; justify-content: center; /* 一行文字的時(shí)候 text-align 無效 */ background-color: cornflowerblue; }
