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

時間 2019-11-07

標籤一篇文章瞭解移動文本垂直居中欄目無線简体版

原文原文鏈接

在平常工做中，常常會遇到圖片+文字+背景色的設計稿實現。常常咱們在Chrome瀏覽器上調試的好好的，可是到了移動端就會有各類奇特的適配問題——最常常碰見莫過於Android中文字稍微偏上了。在iOS和Android上的調試，經常讓工程師們苦不堪言。本文對文字的垂直居中作了初步的研究，描述了爲何會出現偏移，並給出了彈性盒子佈局的方案（適配大部分狀況），但願能對你們的工做帶來一點幫助。

1. 爲何Android中文本偏上

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

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

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

1.1 使用彈性盒子佈局

display: flex;
align-items: center;

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

注意：在此方案中，咱們使用的是彈性盒子佈局，塊級元素中的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元素中設置，可是會影響頁面中英文文本的展現。app

<div class="test" lang="zh-cmn-Hans">
或者
<html lang="zh-cmn-Hans">

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...
源碼：字體

<!DOCTYPE html>
<html lang="en"> 

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>塊級元素實現文字垂直居中</title>
  <style>
    .container {
      display: flex;
    }

    .icon-container {
      background: #EDF5FF;
      border-radius: 0.5vw;
      display: flex;
      justify-content: space-between;
    }

    .text {
      display: flex;
      align-items: center;
      color: #377DF8;
      font-size: 1.5vw;
      background: #EDF5FF;
    }

    .icon {
      width: 4.27vw;
      height: 4.27vw;
      margin: auto 1.07vw;
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
    
    .download-icon {
      background-image: url('http://h5.ssp.qq.com/static/web/websites/newsplugin/static/image/download_app_32.png');
    }
  </style>
</head>

<body>
  咱們會測試移動端圖片+文字的居中
  <div class="container">
    <div class="icon-container">
      <div class="icon download-icon"></div>
      <div class="text" lang="zh-cmn-Han">當即下載</div>
    </div>
  </div>
</body>

</html>