前幾天的一篇博文：移動(dòng)Web單行文字垂直居中的問題，提到了移動(dòng)web里小于12px的文字居中異常的問題，最后還是改為12px才近乎解決了問題。但是有時(shí)候或許并不是那么樂觀，你并不能將原本定為10px的字體改為12px。那該怎么辦呢。

我們都知道，移動(dòng)端為了高清屏顯示1px的border，會(huì)有那么幾種方法，通常最好的方法是transform scale，并且支持圓角。既然一個(gè)border能縮放，那么整個(gè)文字區(qū)域自然也能縮放。

比如上篇博文里的示例，CSS是這樣的：

.label {height: 20px;line-height: 20px;font-size: 10px;border: 1px solid #000; }

既然要縮放，就把1px border也一起做的，省的再添加一個(gè)偽類，我們將各個(gè)尺寸乘以2，然后縮放為原來的一半：

.label {height: 40px;line-height: 40px;font-size: 20px;border: 1px solid #000;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: 100% 100%;transform-origin: 100% 100%; }

但，或許是line-height在移動(dòng)端確實(shí)不怎么樣，居中效果并不好，改為padding才好了些。

再嘗試一種方案，給元素外層再包一層父元素，用display：table來實(shí)現(xiàn)。

<div class="label-parent"><p class="label">你是誰</p> </div> .label-parent {display:table;height: 40px;line-height: 40px;font-size: 20px;border: 1px solid #000;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: 100% 100%;transform-origin: 100% 100%; } .label {display: table-cell;vertical-align:middle; }

這樣應(yīng)該是比較健全的的方案，多寫一層，拋棄掉padding和line-height，最后實(shí)現(xiàn)的效果也不錯(cuò)。有童鞋可能會(huì)擔(dān)心會(huì)糊，確實(shí)chrome模擬器是會(huì)糊的，但手機(jī)屏幕大都是高清屏幕，幾乎不會(huì)出現(xiàn)模糊的情況。

?

在IOS和Android4.x上工作正常，但Android2.3 ?并不會(huì)縮放，搜索一通有說是scale和translate一起不管用的，有說viewport設(shè)置的，不過都沒用，所以可以給Android2.x單獨(dú)設(shè)置未縮放的樣式，只要排版不亂就好。

.label-2x {height: 20px;line-height: 20px;font-size: 10px;border: 1px solid #000; }

那如何知道系統(tǒng)是2x呢，在Special CSS3 Scaling for andriod version less than 2.3發(fā)現(xiàn)了一段好用的腳本：

var ua = navigator.userAgent; if( ua.indexOf("Android") >= 0 ) {var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));if (androidversion <= 2.3) {// alert('andriod < 2.3');// your code here } }

你可以動(dòng)態(tài)的加一段css到style里，如果只有一個(gè)標(biāo)簽?zāi)阋部梢灾苯硬僮鱠om改變樣式。

?

至此，再不完美也不想不想再折騰了。。。

轉(zhuǎn)載于:https://www.cnblogs.com/zjzhome/p/4913741.html

總結(jié)

以上是生活随笔為你收集整理的完美解决移动Web小于12px文字居中的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。