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

標籤：有一個   12px   roi   vertica   pretty   ica   color   字型大小   splay   

問題描述

在開發中，我們常使用 line-height 屬性來實現文本的垂直置中，但是在安卓瀏覽器渲染中有一個常見的問題，就是對於小於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%;}

 

但不知道為什麼，用這種方法之後我總是感覺文字沒有絕對地置中，好像是有一點細微的偏下，

<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 瀏覽器文本垂直置中問題