一篇文章相识挪动端文本垂直居中

2023年9月4日 256次阅读 来源: 这是你的玩具车吗

在一样平常事情中，经常会碰到图片+笔墨+背景色的设想稿完成。经常我们在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元素中设置，然则会影响页面中英文文本的展现。

<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>

参考文献：

  1. 《Android浏览器下line-height垂直居中为何会偏离？》
    原文作者：这是你的玩具车吗
    原文地址: https://segmentfault.com/a/1190000017228617
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞