移动端line-height设置与height一致垂直不居中问题解决方案

最新推荐文章于 2025-05-20 23:31:36 发布
最新推荐文章于 2025-05-20 23:31:36 发布
阅读量7.7k 收藏 2
点赞数 4
分类专栏： 前端
本文探讨了在Android设备上遇到的line-height设置导致的文字垂直居中问题，并提供了具体的解决方案，包括字体大小的要求及中文字体声明等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

问题描述

经验告诉我们当line-height设置的和height一样的时候，文字会垂直居中。但是残酷的现实告诉我们，根本就不是这么回事?‍?‍?‍。
在谷歌浏览器上一切如常，但是一旦到了手机上，尤其是安卓手机，简直是惨不忍睹。各种偏移，虽然误差只有1~2个像素，但是这效果实在难看啊。

解决方案

参考Android浏览器下line-height垂直居中为什么会偏离？ - 周祺的回答 - 知乎
https://www.zhihu.com/question/39516424/answer/274374076
知道：

  • 安卓手机下字体大小大于12px，且为偶数时，才可以正常垂直居中
    这个实在避免不了啊，设计人员的字体真的是百花齐放，就是没有偶数???
  • 尽量使用中文字体，并显式声明为中文字体，在 index.html 中设置 <html lang="zh-cmn-Hans">
  • 为了兼容MIUI8.0+系统，再单独声明 font-family: MIUI

总之为了解决垂直不居中的问题，真是费劲了九牛二虎之力，还有千万别学我，胡乱设定字体，不然自食恶果。。。。。。

参考链接

感谢
[1] Android浏览器下line-height垂直居中为什么会偏离？ - 周祺的回答 - 知乎
https://www.zhihu.com/question/39516424/answer/274374076

H5 --（解决）安卓的webview中line-height等于height不垂直居中问题
凉凉的博客
04-24 7896
问题描述：用rem适配的H5页面在安卓的webview中，当line-height等于height时，有时会稍微偏上一些，不能垂直居中（ps：ios上没有这个问题） 1、分析原因：由于用rem作适配，则根元素的字体大小可能不是整数，然后将元素的字体大小设置为rem为单位时，字体实际的大小若以px为单位则可能是奇数（更可能并不是整数）；且当字体大小小于12px时，安卓webview中的浏览器为了避...
line-height属性在安卓手机有偏移
niesiyuan000的博客
04-01 2967
  第一种 首先设置line-height:normal; 然后用padding去把文字行高撑开   第二种、 把文字根据大小设置宽高放在标签里面 如若用div标签，那么把这个div做垂直居中（不会垂直居中的自行百度）   临时加的（都不行用这个） text-align: center; vertical-align: middle; border: 1px solid ...
line-height属性失效了！！！
最新发布
zx051841的博客
05-20 172
浏览器会把文字的基线放在这个“行框”的中间位置，从而实现视觉上的“垂直居中”。，要想使图片的基线居中，就需要为图片添加或者为图片或者文字所在的容器添加属性。在询问了AI以及学习其他大佬的博客以后，也是大致明白了问题所在。位置，图片的基线位置默认是位于图片的底部边缘，所以图片的基线。最近在学习vue的时候，发现了当图片和文字在一行的时候，，都是位于图片的底部边缘，所以这就使得。，文字也不会垂直居中，正是由于。所以，要想使文字在容器里居中，当图片和文字在一行的时候，”对齐的，当我们设置了。
vue 移动端 安卓手机出现 lineheight=height 垂直不居中问题
qq_40509733的博客
05-20 352
vue 移动端 安卓手机出现 lineheight=height 垂直不居中问题 建议采用 弹性布局的方式 实现居中 display:flex; align-items:center; justify-content:center;
移动端设置line-height等于height依然不能垂直居中解决方案
qq_21430819的博客
03-29 2094
在移动开发的时候经常会遇到让一个带背景图片的按钮文字垂直居中，我们最先想到的是设置line-height=height，令人失望的是并没有达到我们的预期效果，于是用上下相同padding实现居中，恶心的是，不同适配的文字高度不一致，所以经常很难调到适合的padding，嗯~~~，难道真的要逼我出绝招了吗？就是用flex！ no，no，no，作为一个有强迫症的程序员怎么可能允许自己实现一个这么小的...
移动端line-height与height相同文字不居中
沉睡的博客
04-22 154
父元素css： :; :; :; :(); 所有数值*2 子元素css： :; :;
HTML字体应用line-height仍不可垂直居中解决方案
yunduanaoligei的博客
09-13 369
今天跟大家聊聊HTML字体应用line-height仍不可垂直居中解决方案，原文中根据实例编码介绍的特别详尽，对我们的学习或是工作中具备一定的参照学习使用价值，需要了解的朋友们下边随着云南仟龙Mark来一起学习学习吧！ 以HTML字体应用line-height仍不可垂直居中解决方案_html图片所示的效果为例，显然我们不仅要使“下一步”文本水平居中，还要垂直居中，此时我们写代码如下： <!DOCTYPE html> <html> <head> &l
移动端android上line-height不居中的问题的解决
01-05
现在越来越多的移动界面使用rem适配，遇到的坑也不尽其数，今天就移动端android上line-height不居中的问题提出自己的解决办法。 据分析得知原因： 1.字体大小不要使用奇数字号，带小数点的更不要提了。也就是说...
解决line-height=height元素高度但是文字并没有垂直居中的问题
11-19
标题提到的问题——"line-height=height元素高度但是文字并没有垂直居中"，实际上涉及到的是文本排版中的基线对齐原理。 首先，我们要理解什么是基线。在排版中，基线是文本字符底部所在的线，它不是一个实际可见的...
详解HTML中字体使用line-height依然不能垂直居中解决办法
11-19
总之，要解决`line-height`无法垂直居中的问题，关键在于理解`font`属性的简写规则，并避免在同一个声明中同时设置`line-height`和`font`。此外，学习和使用现代布局技术，如Flexbox和CSS Grid，可以提供更多的布局...
关于css中line-height(行高)设置无效的问题的解决方法
09-22
然而，在实际应用中，有时可能会遇到设置`line-height`后效果不明显或者无效的问题。本文将通过一个具体的例子来解析这个问题，并提供解决方案。 首先，让我们回顾一下`line-height`的基本概念。`line-height`属性...
line-height等于height为什么不居中
qq_42931285的博客
01-26 1822
注意：height一定是内容盒的高度，即在box-sizing:content-box的情况下，若为border-box时，此时的height为整个盒子的高度，需要减去padding,border、margin的尺寸才为真实的内容盒的height。 如一个盒子box-sizing:border-box,border：10px,height:40px，这时内容盒的高度应该为420px,line-height设置为20px就可实现上下居中。 ...
uniapp button字体没有垂直居中
lsjweiyi的博客
04-16 6835
uniapp在某些场景下，它的button字体没有垂直居中： 应该看的出来，上面比下面宽不少。造成这个现象的原因是我给它的样式设置了height：80%。因为默认样式只提供了default和mini这两个选项，他们分别代表的字体大小是18px和13px。 因为我是不想按钮太挨着我的上下两条边，所以设置了高度。 解决办法1： 放弃设置高度，改为设置字体大小，也能改变按钮的高度。这个方法应该更符合规范。 解决办法2： 方法1可能大家都知道，这里主要想讲一下另一个方案，虽然在这里不一定适合： 造成这个现象其实是
移动端line-height问题
lyna的博客
03-23 1070
对一个元素设置line-height=height，可以实现单行文字垂直居中，但是在手机浏览器实现上总是会有所偏差； 据说是手机浏览器对line-height渲染程度不一样，解决方法如下： .class { line-height:normal; padding:10px 0; /*设置成需要的数值*/ }              ...
height和line-height的区别（简单易懂）
热门推荐
apple_51491580的博客
02-07 2万+
height：指定区域的高度 line-height：一行的高度，简称行高。 行高：两行文字之间基线的距离 1.height和line-height值相同的情况 当height和line-height相等时，区域中的内容居中（即区域的高度和每一行的高度一样，内容居中） 如图所示： 内容居中（蓝色部分是选中的部分，有背景的地方是定义的区域），有背景的地方就是区域高度（height），选中的时候蓝色部分的高度即为行高。 2.对height进一步理解 看下图： 这里height是两倍line-heigh
CSS line-height与垂直居中
qq_43539664的博客
02-08 757
CSS line-heigh与垂直居中 我们都知道，在CSS中，要想实现字体在父元素中垂直居中直接让line-height等于height即可。可是为什么这样设置就可以让文字垂直居中呢？要弄懂这个问题需要先理解以下几个概念。 1、行高 行高指一行文字的基线到下一行文字的基线之间这一段距离 行高的高度 = 字体高度 + 上间距 + 下间距 2 、行框 在浏览器中，会将给每一段文本生成一个行框，行框的高度就是行高。 这个行框是不可见的。浏览器会把在生成一个字体时会把行框分为三部分。字体本身的高度和上下两部分高
手机端多个div一行显示宽高相同并且自动适配（纯css）
frt的博客
12-27 5294
一帮来说，pc端的静态页一般都是像素为基本单位，基本都是卡尺卡出来的，只要是有耐心，一般没什么大问题 而移动端的对应的终端的屏幕的大小差异太大了，为了适配不同的屏幕这时候就不能以像素px为单位了，更多的是相对的百分比% 一行平均显示两个圆并且宽高相同而且随着屏幕的大小的变化进行缩放，一般来说可以这样 一个大div中2个小div，这两个小div宽带是大div的50%，高度呢就有些说法了
移动端常见的高度问题的解析
Oliver_web的博客
10-17 1568
var h = ""; h += " 网页可见区域宽："+ document.body.clientWidth+"\n"; h += " 网页可见区域高："+ document.body.clientHeight+"\n"; h += " 网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)"+"\n"; h += " 网页可见区域高："
CSS行高line-height详解与用法实例
例如，当文本内容只有一行时，可以利用`line-height`与`height`配合使文字居中显示。同时，由于`line-height`是可以继承的属性，开发者需要考虑其在整个文档结构中的作用，确保不同层级元素间的间距一致或符合预期。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值