解决安卓line-height偏上

最新推荐文章于 2024-04-19 18:26:52 发布
最新推荐文章于 2024-04-19 18:26:52 发布
阅读量3.7k 收藏 1
点赞数 1
文章标签： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/makerbeen/article/details/90693077
版权

前段时间遇到问题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>

 

javascriptFaker
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决 Android 系统 设置line-height和height相同，文字却偏上显示（pc端和ios都显示ok）
凌风的博客
10-24 4540
问题： 代码： width: 36px; height: 20px; line-height: 20px; position: absolute; top: 14px; right: 14px; color: #fff; background: #F87D28; border-radius: 2px; font-si...
移动端android上line-height不居中的问题的解决
01-05
现在越来越多的移动界面使用rem适配，遇到的坑也不尽其数，今天就移动端android上line-height不居中的问题提出自己的解决办法。 据分析得知原因： 1.字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。 2.使用rem的单位时造成（根元素如果动态改变时，根元素字体可能不是整数）。 那么，怎么解决了？ 网上有好几种，如 1.把字号内外边距等设置为需求大小的2倍，使用transform进行缩放。只能针对 单个或者是一排的布局进行缩放，如果是父级自适应高度且可展示多行的，使用transform是有问题的。因为transform缩放
移动端不居中问题/安卓和ios下line-height上下居中 css兼容问题
最新发布
yanjun821126的博客
04-19 360
移动端开发过程，经常会写带0.5px边框角标类的样式，直接使用border设置0.5px边框，ios有些机型会出现显示不完整的情况。所以改用伪元素方法实现边框。1、如果只有单个角标，字号内外边距等设置为需求大小的2倍，使用transform进行缩放。边框问题解决后，又发现安卓系统，文字无法居中。3、使用table布局，但是三星S8存在兼容性问题，其它机型正常。2、不直接设置line-height=height，而是设置。
line-height属性在安卓手机有偏移
niesiyuan000的博客
04-01 2909
  第一种 首先设置line-height:normal; 然后用padding去把文字行高撑开   第二种、 把文字根据大小设置宽高放在标签里面 如若用div标签，那么把这个div做垂直居中（不会垂直居中的自行百度）   临时加的（都不行用这个） text-align: center; vertical-align: middle; border: 1px solid ...
移动端line-height偏上问题
weixin_38304202的博客
09-05 1434
最近做移动端用到line-height时，放到手机上老是不居中，真的怀疑自己眼睛，PC挺好的没问题，一查发现，这是个手机端的一个顽固问题啊，安卓相差还比较大，各种机型相差不一样，解决方法如下：  当你要用到一行字，有高，但要垂直居中时，就用line-height：normal；padding：10px;就行了！！！不知道科不科学
android上line-height的问题
weixin_34049032的博客
06-29 254
关于line-height大家应该非常熟悉了吧，就是用来做垂直居中的，屡试不爽，基本上没有什么问题，但是最近一个项目，测试提了一个bug，看图吧。 从别处窃的图，这个问题只有安卓上才能复现，做了demo，发现应该是font-size的问题，你们可以自己试试，font-size为13px或者奇数时，line-height会有一定的偏差，在safari上没有问题，至于原因，现在还没找到，等找到了...
height = line-height 不居中（偏上、偏下）的问题
Shimeng_1989的博客
11-02 3585
情景：mac电脑上都偏下问题。 尝试的方法：1、找了好久，试了很多方法：如 display:table(父div），display:table-cell;vertical-align:middle(子div），子div中无法居中。 2、使用伪元素等。最后发现是字体的原因（如下） 原因： body { font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, ...
overflow:hidden line-height clearfix:after使用方法介绍
01-19
2.line-height指的是在DIV中的元素上下居中 比如用在里，则可以将line-height的高度和height的值相等，（height:30px; line-height:30px;）这样可以让文字在内相对于30px垂直居中。比如用在内，像这样成段落的，如果...
详解android 中文字体向上偏移解决方案
01-04
列如，一个span的font-size和line-height都设置为16px，在调试时，元素的高度确实是16px，但是，中文的高度看起来并不止16px，而且显示的位置明显超出了元素的尺寸范围，向上偏移。 开始的时候还以为是样式导致的，...
Android-LineChart图标显示多条曲线
04-13
在Android开发中，数据可视化是十分重要的，LineChart作为一种常用的数据展示方式，常用于呈现趋势或者比较多个数据系列。本文将深入探讨如何在Android应用中使用LineChart来显示多条曲线，帮助开发者创建出直观、易...
移动端Android line-height不居中
CamilleZJ的博客
09-19 1014
使用line-height垂直居中时，发现在IOS上显示很正常，但是在安卓机上显示不居中偏上，大约会往上移2px左右，用户体验差。 网上说需要字号大于 12px 才能够正常居中，且无小数点的整数，并且还要字号为偶数，即： 字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。 使用rem的单位时造成（根元素如果动态改变时，根元素字体可能不是整数）。 但现...
Android代码-拥有更好效果的 LineHeight TextView
08-06
LineHeightEditText Fix edittext lineHeight and cursor effect when set lineSpacingExtra or lineSpacingMultiplier EditText vs LineHeightEditText Usage compile 'com.hanks:lineheightedittext-library:1.0' License Copyright 2017 hanks Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in w
移动端android上line-height不居中的问题
热门推荐
玉帛逸的博客
07-19 1万+
现在越来越多的移动界面使用rem适配，遇到的坑也不尽其数，今天就移动端android上line-height不居中的问题提出自己的解决办法。 据分析得知原因： 1.字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。 2.使用rem的单位时造成（根元素如果动态改变时，根元素字体可能不是整数）。那么，怎么解决了？ 网上有好几种，如 1.把字号内外边距等设
Android中line-height不居中的解决办法
qq_42894952的博客
08-17 1065
android的webview中，line-height的垂直居中 对于字体小于12px的无效，主要是因为避免奇数font-size带来的偏差，设置成了偶数，所有会有一些偏上 解决办法： 1. 改变字体大小 最直接的方法就是改变字体大小让它大于 12px 能够正常居中，如果页面对字体大小要求比较严格的话，可以先将原来包括 font-size 在内的属性放大两倍，再用 scale 缩小一倍，这样...
android垂直居中偏移,安卓移动端line-height垂直居中出现偏移的原因，及解决方法...
weixin_28790465的博客
05-28 352
目前在移动端安卓手机上使用line-height属性，让它的值等于height，结果发现是不居中的。出现了一定位置的偏移情况，如果略微只有两三个像素差距是看不出来的。左图中的字号是12px，右图中的行高是26px。仔细观察过上图后，闲话少扯，直接说说我对这个android上line-height问题的一些看法：字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px...
解决H5页面在部分android版本中line-height不兼容问题
qq_33295622的博客
10-26 2708
在部分android的手机中会出现使用line-height文字偏上的问题，可利用padding来实现文字垂直居中， 若元素高30pxelement{ 　　font-size: 13px; 　　line-height:0; 　　padding: 15px 0;//相当于line-height 30px }
安卓TextView的lineHeight*lineCount!=height问题,解决不支持滚动的系统下对多页Text进行分页
lt的博客
06-23 1252
最近在做运行在墨水屏系统上的程序,由于墨水屏刷新率比较低,所以系统内的软件是不允许滚动和加动画的(在逻辑上)这样就导致了平时在普通安卓手机上很简单的程序,在墨水屏系统上就很麻烦,比如多页的应用,普通安卓机直接搞一个ScrollView和RecyclerView就可以了,但墨水屏系统上你需要自己计算每页展示多少内容,然后在进行分页处理...
解决android的textview上下空白
06-09
解决 Android 的 TextView 上下空白较大的方法有以下几种： 1. 设置行高（line height）：可以通过在 XML 中设置 TextView 的行高来调整上下空白的大小。例如： ``` <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:lineHeight="20dp" android:text="Hello World!" /> ``` 2. 设置 padding 值：可以通过在 XML 中设置 TextView 的 padding 值来调整上下空白的大小。例如： ``` <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="5dp" android:paddingBottom="5dp" android:text="Hello World!" /> ``` 3. 调整字体大小（text size）：可以通过在 XML 中设置 TextView 的字体大小来调整上下空白的大小。例如： ``` <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:text="Hello World!" /> ``` 4. 调整布局属性（layout attributes）：可以通过在 XML 中设置 TextView 的布局属性来调整上下空白的大小。例如，如果 TextView 是在 LinearLayout 中，可以设置 layout_gravity 属性来调整上下位置。例如： ``` <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:layout_gravity="center_vertical" /> </LinearLayout> ``` 希望这些方法可以帮助你解决问题！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值