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

在日常工作中,经常会遇到图片+文字+背景色的设计稿实现。经常我们在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垂直居中为什么会偏离?

汤姆C
tomczhang的专栏,我会在这个专栏中撰写我的思考,工作中遇到的问题和苦恼,每周一篇

职业提升三部曲:

4.5k 声望
792 粉丝
0 条评论
推荐阅读
项目经历准备篇——如何准备阿里巴巴P6/P7前端面试
在上次的校招文章之后,有很多同学问有没有社招相关的东西可以写一篇,现在它来了。比起校招,社招更加看重项目经历+项目经历反应的思考。本文针对的是想进入阿里的P6/P7同学,着重讲解了很多同学容易忽视的项目...

这是你的玩具车吗30阅读 3.5k评论 5

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.4k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 6.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.4k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan46阅读 3.2k评论 14

封面图

职业提升三部曲:

4.5k 声望
792 粉丝
宣传栏