Android设置文字靠右居中_Android设置文字靠右居中

(图1)

Android设置文字靠右居中_Android设置文字靠右居中_02

(图2)

Android设置文字靠右居中_Android设置文字靠右居中

(图3)

Android设置文字靠右居中_垂直居中_04

(图4)

第1张图是chrome模拟器里的效果。

第2、3张图是两台手机里的效果。

第4张图是按钮的样式。

按钮的高度和行高相等,文字应该垂直居中。

第1张图chrome模拟器中是正确的,第2张图中的效果也基本正常,但第3张图中的文字明显偏上了。

单位试过 rem,也试过 px,都会存在这种情况。

有没有人能分析一下问题的原因?

有没有完全兼容的解决方案?

明确一下我的问题:一行文字,设置成在该行垂直方向居中,PC端正常,移动端有的正常,但有的明显偏上,这个问题是怎么产生的,有没有解决方案?

Android设置文字靠右居中_Android设置文字靠右居中_05

元素长宽、字体大小先扩大为两倍,再用 scale 缩小为一半大小后的结果,效果确实好了一点,但感觉还是有一点点偏上。

2018.3.6补充

不知道业内的专业名称是怎样的,我自己把前端中的像素模式分为两类:物理像素模式和设备独立像素模式。

物理像素模式:css中的1px永远对应1个物理像素。

设备独立像素模式:css中的1px是1个设备独立像素,设备独立像素最终会被换算成物理像素,1个设备独立像素可能对应1个物理像素,可能对应2个物理像素,也可能对应其他数量的物理像素,这主要跟屏幕的设备像素比(dpr,device pixel ratio)有关。比如,iPhone6 的dpr是2,则在iPhone6中,在设备独立像素模式下,css中的1px对应2个物理像素。

默认情况下,网页都是物理像素模式,一般通过加入后面这行代码来开启设备独立像素模式:

出现这里提到的垂直居中兼容性问题,可能是浏览器在将设备独立像素换算成物理像素时出现了误差。所以,在没有必要开启设备独立像素模式的情况下,删除上面的那句代码,让浏览器以物理像素模式渲染页面,或许可以避免这个问题。

回答

目前比较有效的解决方法就是transform,放大一倍再缩小一半,但是写起来繁琐而且影响布局。我也想知道有没有什么既好又方便的方法

模拟器模拟出来的是垂直居中的没错,但是在实际手机中,苹果手机渲染出来是垂直居中的,安卓手机渲染出来就是会偏上一些,兼容的方法就是不要设置height,line-height设置为1,用padding值上下相等来保持垂直居中。

今天这个问题也纠结了研究了一个下午,安卓机下表现异常,PC、苹果机表现良好,如果一般情况,用margin偏移量来对齐,极端情况还是transform绝对定位居中比较靠谱。

这个span带边框的情况垂直居中确实有兼容性问题, 提供其他的思路, 让设计给svg

用过一种方法是,用如下代码判断,是否是安卓

如果是安卓的话,就用margin-top设置多2~3个像素

isAndroid: function(){
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/android/i) == "android") {
return true;
} else {
return false;
}
},
if(isAndroid()){
$('.bank-list-new').addClass('android');
}
.bank-list-new{
margin: 10px auto;
}
.bank-list-new.android{
margin-top: 13px;
}

像素密度问题,比如你是20px的高,行高也是20px,如果像素密度是偶数,也没问题,如果是奇数,就有问题了,所以一般最好高度和字体大小设置匹配,比如文字14px,高度也用偶数,文字15px,高度用奇数

我也遇到了这个问题,原本用< a >标签写的按钮,后来改用button就好了。给个高度,不用写行高,自动垂直居中。

你可以试试vertical-align,另外,没有代码别人不好回答,你可以用codepen做在线demo,方便回答者

用flex布局,几句代码就搞定垂直居中了。教程搜一下就有了

1.表格方法:

实现方法:表格内容本来就是垂直居中的,可以通过模拟表格处理。

.box_center {
display: table-cell;
width: 300px;
height: 300px;
text-align: center;
vertical-align: middle;
}
.box_center .inner {
display: inline-block;
}
2.vertical-align: middle
实现方法:利用空元素占位实现
.box_center {
width: 300px;
height: 300px;
text-align: center;
}
.box_center .inner {
display: inline-block;
}
.box_center .placeholder {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
3.绝对定位
.box_center {
width: 300px;
height: 300px;
background: #ccc;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
4.使用 transform 实现
.box_center {
position: absolute;
width: 300px;
height: 300px;
background: #ccc;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
兼容性:Android2.3 系统浏览器不支持容器直接使用 fixed 进行定位,外加 fixed 容器可解决。
结论:
推荐transform 实现
display:-webkit-flex;
justify-content:center;
align-items:center;
width:100px;
height:28px;
你的line-height改30px试试
line-height和vertical-align一起使用才更配哦