小于12px的文本居中問題

HelKyle 發布于2019-08-30 15:53 / 1974人閱讀

摘要：前幾天在做項目的過程中，關于字體小于時，很難做到完全居中顯示，表示有點抓狂，各種百度找到一個貌似還不錯的方法，總結出來分享給你和我。

前幾天在做項目的過程中，關于字體小于12px時，很難做到完全居中顯示，表示有點抓狂，各種百度找到一個貌似還不錯的方法，總結出來分享給你和我。

在PC端的Chrome瀏覽器中，小于12像素的字體仍然以12像素顯示，即使是設置了-webkit-text-size-adjust: none;也好像沒什么作用。經過實驗，發現如下兩種方式比較有用，各位看官可聽我細細道來。

方式一

使用transform:scale()
假如設計同學給你的字體大小是10px,你設置了font-size:10px，此時在PC中測試并不會看到效果；一種有用的方法是：

font-size: 12px //PC中Chrome的最小字體
transform: scale(0.833333333);
height: 12px; //設計給的高度是10px
line-height: 12px;

這種方式是可以將字體縮小到將近10px，但是包裹字體的標簽(div,p)的寬度、高度甚至是margin等值都縮小了0.8333333，假如設計同學給你的div的高度是20px，現在為了能正確顯示20px的高度，你必須要將高度設置為(20/0.8333333)px，寬度和margin的值的設置也是這樣；要想讓其居中，也必須將line-height設置為(20/0.8333333)px；這種計算方式比較復雜，且這種方式可能會影響到文檔流中其他元素的位置，于是就有了如下的方式二的產生。

方式二

方式二中有兩個比較重要的點：
（1）對于小于12px的字體，可先將其擴大二倍，然后使用transform縮小0.5倍
（2）在標簽的位置方面，可以給它一個相對定位的父元素，此父元素的高度和寬度可按照設計圖設置，然后將它的定位設置為相對定位，并且使其位于父元素的中心（垂直水平都居中）
HTML結構如下：


    
        我要垂直水平居中

css樣式：

.parent{
    position: relative;
    width: 120/@rem;
    height: 24/@rem;
    overflow: hidden;   
}
child{
    position: absolute;
    top: -50%;
    left: -50%;
    width: 240/@rem;
    height: 48/@rem;
    line-height: 48/@rem;
    font-size: 36/@rem;
    color: #ffffff;
    transform: scale(0.5);
    background: #fa5d5f;
    border-top-left-radius: 16/@rem;
    border-bottom-right-radius: 16/@rem;
    box-sizing: border-box;
}

parent和child的關系如下圖所示，其中parent相當于用來占位，這樣縮放就不會影響到parent外面的父元素，因為進行縮放的是絕對定位的child，它不在文檔流內，并不會影響到其他元素在文檔流中的位置。

另外，附送兩個小tips
（1）小于12px的字體（或者說微信webview）不適用line-height,但是在大于等于12px的字體（或者非微信webview）適用line-height,那么從這方面就可以嘗試通過csshack的方式來實現了，所以如果想用line-height做居中處理，最好不要使用小于12px的字體，可以使用方式一進行縮放；
（2）字體最好使用偶數像素，基數像素在顯示時，通常會遇到1個像素偏差，無法完全居中，這個可以和設計同學商量。

GPU云服務器云服務器 html將文本居中 html 讓文本居中回顯居中問題小于10的質數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116798.html

單選框和復選框與文本的垂直居中顯示問題

摘要：故嘗試揣摩業界大牛的一些歷程，希望能得到不一樣的收獲。張鑫旭前輩的博客是很不錯的選擇之一，對這些基本技能闡述得十分透徹。本文是對其很早一篇文章復選框或單選框與文字對齊的問題的深入研究的再次實驗，畢竟瀏覽器對的支持多年來變化很大。前言工作三年，寫了不少代碼，也確實接觸不少技術。但是仔細回顧，卻又感一片空白，一臉茫然。故嘗試揣摩業界大牛的一些歷程，希望能得到不一樣的收獲。張鑫旭前輩的...

WrBug 2019-08-01 17:54 評論0 收藏0
單選框和復選框與文本的垂直居中顯示問題

摘要：故嘗試揣摩業界大牛的一些歷程，希望能得到不一樣的收獲。張鑫旭前輩的博客是很不錯的選擇之一，對這些基本技能闡述得十分透徹。本文是對其很早一篇文章復選框或單選框與文字對齊的問題的深入研究的再次實驗，畢竟瀏覽器對的支持多年來變化很大。前言工作三年，寫了不少代碼，也確實接觸不少技術。但是仔細回顧，卻又感一片空白，一臉茫然。故嘗試揣摩業界大牛的一些歷程，希望能得到不一樣的收獲。張鑫旭前輩的...

yck 2019-08-29 13:44 評論0 收藏0
前端常見問題——安卓文本無法垂直居中

摘要：安卓文本無法垂直居中的問題問題安卓的字體大小在小于像素的時候無法使用行高來垂直居中目前在微信等應用都存在該問題，而在最新的移動端瀏覽器上無該問題截止本文編寫時間，微信客戶端的版本為，版本為。安卓文本無法垂直居中的問題問題安卓 webview 的字體大小在小于 12 像素的時候無法使用行高來垂直居中 ps：目前在微信等應用都存在該問題，而在最新的移動端 Chrome 瀏覽器上無該問...

aristark 2019-08-29 17:19 評論0 收藏0
移動端兼容問題總結(1)

摘要：原文地址鍵盤類型問題描述在上只需要更換即可更改鍵盤類型，無效。補充解決方式輸入法頂起頁面問題描述頁面被輸入法頂起，導致滾動，無法鎖定解決方式在當前容器外層再包裹一層，使用來解決這個問題，做一個容器內滾動。原文地址: https://luoyangfu.com/article... input 鍵盤類型問題描述: 在android上只需要更換type 即可更改鍵盤類型，ios無效。...

arashicage 2019-08-30 11:21 評論0 收藏0