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

sutaking 发布于2019-08-23 13:50 / 3420人阅读

摘要：经常我们在浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题最经常遇见莫过于中文字稍微偏上了。为什么中文本偏上文本都会有一个内容区域，这个区域就是我们选中文本时展示的区域。

在日常工作中，经常会遇到图片+文字+背景色的设计稿实现。经常我们在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云服务器垂直居中实现垂直居中水平垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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