一篇文章了解移動端文本垂直居中

sutaking 發布于2019-08-23 13:50 / 3422人閱讀

摘要：經常我們在瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題最經常遇見莫過于中文字稍微偏上了。為什么中文本偏上文本都會有一個內容區域，這個區域就是我們選中文本時展示的區域。

在日常工作中，經常會遇到圖片+文字+背景色的設計稿實現。經常我們在Chrome瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題——最經常遇見莫過于Android中文字稍微偏上了。在iOS和Android上的調試，常常讓工程師們苦不堪言。本文對文字的垂直居中做了初步的研究，描述了為什么會出現偏移，并給出了彈性盒子布局的方案（適配大部分情況），希望能對大家的工作帶來一點幫助。

1. 為什么Android中文本偏上

文本都會有一個內容區域，這個區域就是我們選中文本時展示的區域。Android在渲染文本的時候會參考字體，但是原生Android又沒有默認的中文字體，這就導致了它使用英文字體來進行內容區域的設置，讓文本在內容區域中就偏移了。而CSS是通過內容區域來設置垂直居中的，所以這個問題從根子上就錯了。對于低版本的Android機器（7.0以下），單純CSS的方法是不夠的。

2. 實現文本垂直居中的方案

對于7.0以上的Andriod機器，我們使用以下特性，來實現一個文本垂直居中的方案。

1.1 使用彈性盒子布局

display: flex;
align-items: center;

利用彈性盒子進行垂直居中來保證PC和iOS的垂直居中。

注意：在此方案中，我們使用的是彈性盒子布局，塊級元素中的line-height不是指行間距，而是指塊級容器內部line-box的最小高度。line-height和height設置為同樣的值指針對內聯元素，不適用于本方案。另外，line-height的默認值是normal，被不同的瀏覽器實現為1，1.2或者其他的值，強行把line-height設置為1也會導致錯位。

1.2 給Android設置中文字體

在文本元素添加屬性lang="zh-cmn-Hans"，代表中文-國語-簡體，手動給Android設置中文。也可以在html元素中設置，但是會影響頁面中英文文本的展示。


或者

1.3 font-size設置為vw避免適配

vw: 屏幕寬度的1%，業界最新的適配方法。在750寬度的屏幕中，1vw=7.5px。具體概念及使用方法可以參考《茴字的四種寫法—移動適配方案的進化》

我自己的實踐經驗，我發現當font-size值設置為0.5vw倍數時——例如0.5vw, 1.5vw, 2vw...，**在移動端配合彈性盒子布局總能垂直居中（某些低端機型要設置為1vw的倍數）。

PS: 應該涉及到某些具體的屏幕像素原理，期待能后期補充。

1.4 實際Demo

URL：http://h5.ssp.qq.com/static/t...
源碼：


 


  
  
  
  塊級元素實現文字垂直居中
  



  我們會測試移動端圖片+文字的居中
  
    
      
      立即下載

參考文獻：

《Android瀏覽器下line-height垂直居中為什么會偏離？》

云服務器 GPU云服務器垂直居中實現垂直居中水平垂直居中文字垂直居中

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

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

一篇文章了解移動端文本垂直居中

摘要：經常我們在瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題最經常遇見莫過于中文字稍微偏上了。為什么中文本偏上文本都會有一個內容區域，這個區域就是我們選中文本時展示的區域。在日常工作中，經常會遇到圖片+文字+背景色的設計稿實現。經常我們在Chrome瀏覽器上調試的好好的，但是到了移動端就會有各種奇特的適配問題——最經常遇見莫過于Android中文字稍微偏上了。在iOS和An...

Vultr 2019-08-29 17:28 評論0 收藏0
vertical-align以及利用 vertical-align 實現垂直居中

摘要：在中實現垂直居中很多時候會用到，不過我一直對的使用糊里糊涂，現在整理一下關于它的一些知識點。將盒子的垂直中心點與父級盒子基線往上一半高度的位置對齊。時位置與設置一致。我們可以將設為來讓元素完全垂直居中。在 css 中實現垂直居中很多時候會用到 vertical-align ，不過我一直對 vertical-align 的使用糊里糊涂，現在整理一下關于它的一些知識點。原文鏈接 1. 適...

lscho 2019-08-30 15:52 評論0 收藏0
vertical-align以及利用 vertical-align 實現垂直居中

摘要：在中實現垂直居中很多時候會用到，不過我一直對的使用糊里糊涂，現在整理一下關于它的一些知識點。將盒子的垂直中心點與父級盒子基線往上一半高度的位置對齊。時位置與設置一致。我們可以將設為來讓元素完全垂直居中。在 css 中實現垂直居中很多時候會用到 vertical-align ，不過我一直對 vertical-align 的使用糊里糊涂，現在整理一下關于它的一些知識點。原文鏈接 1. 適...

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

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

aristark 2019-08-29 17:19 評論0 收藏0