解决安卓line-height偏上

最新推荐文章于 2025-08-04 14:01:01 发布

原创最新推荐文章于 2025-08-04 14:01:01 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS

博主分享在安卓中line-height设置居中未达理想效果的解决办法。谷歌浏览器font-size最小值为12px，安卓同理，块小于12px时line-height作用不理想。解决办法有两种，一是用scale放大字体再居中，二是用flex布局实现字体居中。

前段时间遇到问题line-height设置了居中但是却没有出现理想的情况,在安卓中整体的内容偏上,那么只好各种渠道去解决最后有了自己的答案总结一下

首先说一下谷歌浏览器的font-size值的最小值为12px,如果小于12px的时候那么它还是按照12px来显示

那么在安卓也是按照12px来显示,并且当你的块为12px以下的时候才会产生line-height值作用不理想的问题

具体为什么小于12px就会在安卓中导致这个问题我也没找到原因,如果有人知道可以告知我

那么解决办法分为两种

一种自然可以用最舒服scale的办法让字体放大二倍然后居中那么是可以解决这个问题的

而第二种我用flex去解决它的居中就是line-height居中有兼容性,那我们直接不用line-height用flex去让字体居中就好了

老规矩上代码

<!DOCTYPE html>
<html>
<head>
	<title>demo exame</title>
	<style type="text/css">
		.box{
			position: relative;
			width: 200px;
			height: 20px;
			font-size: 2px;
/*			line-height: 20px;*/
			background-color: gray;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	</style>
</head>
<body>
	<div class="box">
		你好
	</div>
</body>
</html>