热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html中字体在移动端居中方法

一般在pc中我们不论用rem或者px,都可以使文字很好的垂直或水平居中。但是在移动端中,文字的垂直居中会出现差异。本文主要测试的手机是Android,因为ios对于px和rem变现都

一般在pc中我们不论用rem或者px,都可以使文字很好的垂直或水平居中。

但是在移动端中,文字的垂直居中会出现差异。

本文主要测试的手机是Android,因为ios对于px和rem变现都比较好,所以不做测试。

首先我们使用rem来测试,在此已经清除所有默认样式,并且设定行高和父框高度都是1.2rem。仅改变文字的大小。

pc中效果:


可以看到pc中rem表现良好。

Android手机中:


android手机中可以看到文字有明显的上移。

然后我们用px来进行测试,去除所有默认样式,元素高度、行高都是20px,仅改变文字大小。

在pc端:

发现文字有点偏下

在Android浏览器上:

发现跟pc一样,有点偏下,但是比rem感觉好多了。

不过由于移动端的特殊性,我们需要根据屏幕实际的宽度来计算文字的大小,所以就必须使用rem,那么如果使用rem,如何使文字垂直居中呢。

1、利用table-cell表格属性:

    

table

在pc上,十分完美。但是在Android机上:可以看到差的有点远了。


2、利用缩放:


在pc上:完美。在Android上:,居然也不错,如果父框高于字体高度的话,则完全看不出来,但是缺点是元素会占缩放前的空间,所以要使用的话还是加上定位吧。

3、用flex


在pc上完美。

在Android上:,也比较完美,如果父框高于字体高度的话,则完全看不出来。

综上所述,rem在移动端垂直居中最好的方法就是缩放和flex弹性盒子了。


推荐阅读
  • 通常情况下,修改my.cnf配置文件后需要重启MySQL服务才能使新参数生效。然而,通过特定命令可以在不重启服务的情况下实现配置的即时更新。本文将详细介绍如何在线调整MySQL配置,并验证其有效性。 ... [详细]
  • Python自动化测试入门:Selenium环境搭建
    本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
  • 本文详细介绍如何在 iOS 7 环境下申请苹果开发者账号,涵盖从访问开发者网站到最终激活账号的完整流程。包括选择个人或企业账号类型、付款方式及注意事项等。 ... [详细]
  • 本文介绍了如何通过Java代码计算一个整数的位数,并展示了多个基础编程示例,包括求和、平均分计算、条件判断等。 ... [详细]
  • 本题要求在一组数中反复取出两个数相加,并将结果放回数组中,最终求出最小的总加法代价。这是一个经典的哈夫曼编码问题,利用贪心算法可以有效地解决。 ... [详细]
  • 本篇文章介绍如何将两个分别表示整数的链表进行相加,并生成一个新的链表。每个链表节点包含0到9的数值,如9-3-7和6-3相加得到1-0-0-0。通过反向处理链表、逐位相加并处理进位,最终再将结果链表反向,即可完成计算。 ... [详细]
  • 本文详细介绍了如何解决 Microsoft SQL Server 中用户 'sa' 登录失败的问题。错误代码为 18470,提示该帐户已被禁用。我们将通过 Windows 身份验证方式登录,并启用 'sa' 帐户以恢复其访问权限。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
  • Java中的基本数据类型与包装类解析
    本文探讨了Java编程语言中的8种基本数据类型及其对应的包装类。通过分析这些数据类型的特性和使用场景,以及自动拆装箱机制的实现原理,帮助开发者更好地理解和应用这些概念。 ... [详细]
  • 本文详细探讨了Java中的包管理机制,包括默认包的使用和自定义包名的创建方法。通过实际操作,帮助开发者更好地理解和应用包管理。 ... [详细]
  • 探讨 HDU 1536 题目,即 S-Nim 游戏的博弈策略。通过 SG 函数分析游戏胜负的关键,并介绍如何编程实现解决方案。 ... [详细]
  • 深入解析动态代理模式:23种设计模式之三
    在设计模式中,动态代理模式是应用最为广泛的一种代理模式。它允许我们在运行时动态创建代理对象,并在调用方法时进行增强处理。本文将详细介绍动态代理的实现机制及其应用场景。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • 本文详细介绍了get和set方法的作用及其在编程中的实现方式,同时探讨了点语法的使用场景。通过具体示例,解释了属性声明与合成存取方法的概念,并补充了相关操作的最佳实践。 ... [详细]
  • 深入剖析JVM垃圾回收机制
    本文详细探讨了Java虚拟机(JVM)中的垃圾回收机制,包括其意义、对象判定方法、引用类型、常见垃圾收集算法以及各种垃圾收集器的特点和工作原理。通过理解这些内容,开发人员可以更好地优化内存管理和程序性能。 ... [详细]
author-avatar
乐在hhh其中
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有