Android 瀏覽器文本垂直居中問題

  • 2019 年 12 月 4 日
  • 筆記

本文作者：IMWeb ShiJianwen 原文出處：IMWeb社區 未經同意，禁止轉載

問題描述

在開發中，我們常使用 line-height 屬性來實現文本的垂直居中，但是在Android瀏覽器渲染中有一個常見的問題，就是對於小於12px的字體使用 line-height 屬性進行垂直居中的時候，渲染出來的效果並不是文字垂直居中，而是會偏上一些。舉兩個程式碼示例如下：

1. 大於12px

html

<span>testtesttest</span>

css

span {      display: inline-block;      height: 16px;      background-color: gray;      line-height: 16px;      font-size: 12px;  }

<!– more –>

顯示效果

2. 小於12px html

<span>testtesttest</span>

css

span {      display: inline-block;      height: 16px;      background-color: gray;      line-height: 16px;      font-size: 10px;  }

顯示效果

可以看到當 font-size 小於 12px 的時候，利用 line-height 屬性進行垂直居中布局明顯是偏上的，這裡為了避免由於 font-size 是奇數帶來的偏差，特意把 font-size 都設置成了偶數

問題原因

起初對這個問題有過兩種推測，一是認為是字體的問題，或者是瀏覽器渲染的問題。但後面發現即使換了字體只要 font-size 還是小於 12px 一樣會出現這個問題。

解決辦法

看起來問題的根源在於字體大小小於 12px，所以解決問題可以從這個方向入手，要麼改變字體大小，要麼換個方式讓它垂直居中。

1. 改變字體大小 最直接的方法就是改變字體大小讓它大於 12px 能夠正常居中，如果頁面對字體大小要求比較嚴格的話，可以先將原來包括 font-size 在內的屬性放大兩倍，再用 scale 縮小一倍，這樣測試之後也是可行的：

<span class="content">testtesttesttesttest</span>
.content {      display: inline-block;      height: 40px;      background-color: gray;      line-height: 40px;      font-size: 20px;      transform: scale(0.5);      transform-origin: 0% 0%;  }

但不知道為什麼，用這種方法之後我總是感覺文字沒有絕對地居中，好像是有一點細微的偏下，不知道什麼原因，不是 line-height 就是我的眼睛有問題。。。

2. table布局 在元素外再包一層，使用表格布局

<div class="container">      <span class="content">testtesttesttesttest</span>  </div>
.container {      display: table;  }  .content {      background-color: gray;      font-size: 10px;      display: table-cell;      vertical-align: middle;  }

利用 table 布局能夠比較好地實現文本垂直居中，缺點是要在外面多包一層容器。

總結

在查閱了很多資料之後，雖然能夠解決這個問題，但導致問題的具體原因還是不夠明顯，只知道是Android端瀏覽器的渲染問題，再往深一點的原因就有點鞭長莫及了，若有同行研究過這個問題，還望不吝賜教哈~

VirMach 便宜 VPS

QNews

QNews