移动端line-height偏上问题

最新推荐文章于 2023-06-28 23:33:04 发布
最新推荐文章于 2023-06-28 23:33:04 发布
阅读量1.4k 收藏
点赞数

最近做移动端用到line-height时，放到手机上老是不居中，真的怀疑自己眼睛，PC挺好的没问题，一查发现，这是个手机端的一个顽固问题啊，安卓相差还比较大，各种机型相差不一样，解决方法如下：

 当你要用到一行字，有高，但要垂直居中时，就用line-height：normal；padding：10px;就行了！！！不知道科不科学偷笑


事件证明，还是不行，只有把字体大小改成12px或者15px才行！！尴尬

my小新
关注
同样line-height下ios和Android显示不一致的问题
小毛驴的博客
04-29 3415
问题： 当我们设置文字垂直居中时，一般会设置line-heigh于box的高度一致，这是我们很难看出有什么差别。当我们设置icon和文字同时上下居中时，同样的line-height，会发现ios和Android显示不一致，Android会显得偏高 原因： 这个问题通过css是无法解决的，即使解决了也是一种通过微调来实现的hack方法，因为文字在content-area内部渲染的时候已经偏移了，而c...
行高line-height，border 引起的标签间的缝隙问题
BigOrange的博客
02-26 1715
问题现象： 使用字体图标，在内部绝对定位，可是总是下面无法对齐，审查元素感觉是字体图标底部空白了一部分。 html： <a class="active">asdfghjkl</a> css: a.active{ position: relative; } a.active:after { content: "\e812";
解决安卓line-height偏上
makerbeen的博客
05-30 3767
前段时间遇到问题line-height设置了居中但是却没有出现理想的情况,在安卓中整体的内容偏上,那么只好各种渠道去解决最后有了自己的答案总结一下 首先说一下谷歌浏览器的font-size值的最小值为12px,如果小于12px的时候那么它还是按照12px来显示 那么在安卓也是按照12px来显示,并且当你的块为12px以下的时候才会产生line-height值作用不理想的问题 具体为什么小于1...
移动端android上line-height不居中的问题的解决
01-05
现在越来越多的移动界面使用rem适配，遇到的坑也不尽其数，今天就移动端android上line-height不居中的问题提出自己的解决办法。 据分析得知原因： 1.字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。 2.使用rem的单位时造成（根元素如果动态改变时，根元素字体可能不是整数）。 那么，怎么解决了？ 网上有好几种，如 1.把字号内外边距等设置为需求大小的2倍，使用transform进行缩放。只能针对 单个或者是一排的布局进行缩放，如果是父级自适应高度且可展示多行的，使用transform是有问题的。因为transform缩放
解决 Android 系统 设置line-height和height相同，文字却偏上显示（pc端和ios都显示ok）
凌风的博客
10-24 4561
问题： 代码： width: 36px; height: 20px; line-height: 20px; position: absolute; top: 14px; right: 14px; color: #fff; background: #F87D28; border-radius: 2px; font-si...
移动端line-height问题
03-07 134
转抄：http://blog.csdn.net/wjnf012/article/details/54316058最近碰到了这样一个问题，设置line-height属性让文字垂直居中，发现在PC端肉眼观察是居中的，但是在移动端（Android）上总是发现文字偏上，所以有以下的研究。 搜索发现有人说在Android上会有2px的向上偏移，但是实践证明并不是，下面上图(本来准备制成表格比较起...
解决移动端line-height不居中问题
weixin_30672295的博客
06-25 3330
问题：在移动端中使用line-height=height实现文字垂直居中时，在安卓手机会发现文字偏上！ 解决： 1、利用flex布局中的垂直居中属性实现垂直居中,父元素设置 display:flex; height:1rem; align-items: center; 子元素 transform: scale(0.5); transform-origin: le...
安卓设置line-height没有垂直居中
weixin_30568715的博客
03-22 401
移动端页面元素高度等于行高，文字却没有垂直居中，是什么情况？ 12px以下显示问题 可以采用先整体放大，再用css3缩小的方式解决 css设置是这样的： .Mail_list .list_block .bottom dd{ float: right; width: 26%; height: 20px; line-height: 20px; text-align:...
CSS 设置了line-height等于行高之后文字未垂直居中
weixin_44879122的博客
04-04 1645
<style> .box { /* box-sizing 属性是防止盒子由于边框和内边距被撑大 */ box-sizing: border-box; width: 100px; height: 100px; background-color: pink; border: 10px solid skyblue; ...
移动端设置line-height等于height依然不能垂直居中解决方案
qq_21430819的博客
03-29 2053
在移动开发的时候经常会遇到让一个带背景图片的按钮文字垂直居中，我们最先想到的是设置line-height=height，令人失望的是并没有达到我们的预期效果，于是用上下相同padding实现居中，恶心的是，不同适配的文字高度不一致，所以经常很难调到适合的padding，嗯~~~，难道真的要逼我出绝招了吗？就是用flex！ no，no，no，作为一个有强迫症的程序员怎么可能允许自己实现一个这么小的...
移动端垂直居中字体偏上解决方案
Buddha_ITXiong的博客
02-15 3750
做项目的时候发现给盒子设置垂直居中，在PC端是没有问题的但是在移动端上面字体会有明显的偏上 ，设置的line-height和flex布局 align-item:center均无效，在网上找了很多方法最后总结为：在移动端有很多手机不支持line-height,会有自己默认的22px的行高，但是我没有去考究。 我是通过以下设置解决的，亲测有效。padding随自己设定 ...
height = line-height 不居中（偏上、偏下）的问题
Shimeng_1989的博客
11-02 3720
情景：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, ...
css：关于line-height在ios与安卓的不兼容处理
mosowe
02-20 2072
也是拖了很久才来写。。。。 在实际开发中发现，css的line-height属性在ios和安卓中有那么几个像素的偏移，导致两端显示不一致，我的处理方法是： 去除line-height 使用padding width: 72px; height: 28px; text-align: center; line-height: 0px; padding: 14px 0; box-sizing: border-box; height可以不写，那么就用不上box-sizing
移动端_line-height问题
weixin_34161029的博客
11-04 133
如果把line-height加1px，iPhone文字就会下移，由于我们app的ios用户居多，并且android机型太多，不同机型也会显示不同，所以只能退而求其次了。 line-height的兼容问题不太好解决，容器高度越小，显示效果的差距越明显。稍微大一点的高度，最好把line-height设置为高度+1px，两个平台显示都还不错。 转载于:https://www.cnblogs.com/w...
工作中解决过哪些移动端的兼容问题?
最新发布
weixin_64974855的博客
06-28 317
工作中解决过哪些移动端的兼容问题?
input输入框在IOS手机上偏移问题
gaoyu007的博客
07-19 1865
问题：input输入框在IOS手机上，由于placeholder字体小于输入框字体，导致placeholder字体偏上显示。 解决方案：placeholder属性，设置line-height: normal; padding-top: 0.4rem(2px)。就可以。 类似支付宝还花呗-提前还款页面。input输入框问题。 input::-webkit-input-placeholder padding-top .4rem line-height normal 注意 ：父级元素不要设置diaplay: fl
uniapp input 解决 placeholder 垂直不居中，偏上的问题
以后永远的博客
01-27 5825
uniapp input 解决 placeholder 垂直不居中，偏上的问题 前言： uniapp ios 版本 ios 低版本中会出现 placeholder 不居中 偏上问题的发生。 解决： 1.假设 input 的高度为 70rpx； 2.设置 input line-height: 70rpx; .end-input { display: flex; justify-content: center; align-items: center; background: #F4F4F4
h5在Android里文字位置偏下,【CSS】如何解决安卓上按钮文字偏上的问题
weixin_42361611的博客
05-27 1733
比如一个普通的按钮，要做到文字垂直居中按钮css设置为：a {height: 30px;line-height: 30px;font-size: 14px;text-align: center;width: 70px;vertical-align: middle;}在chrome上和ios上没有问题，但是在安卓上文字就会明显偏上，如图试过用table-cell或者line-height设为1,然后...
自定义Vue移动端下拉刷新与上拉加载组件
为了实现下拉刷新和上拉加载功能，尽管没有使用预置的移动端UI框架，开发者选择自定义组件来满足需求。本文主要介绍一个名为"DropDownRefresh.vue"的Vue组件，用于在H5页面中实现实时的下拉刷新和上拉加载动画。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值