按钮或标签内文字垂直居中问题(移动端)

经常碰到文字按钮或者文字标签内部文字需要垂直居中,但是,当我们调好效果后,总会发现在部分机型上无法达到完全垂直居中。

问题如何产生

  1. 字体本身引起,字体距离上边与下边不等,通常距离上边短一点
  2. line-height与font-size计算值之差为奇数(猜测)
  3. android字体小于等于10px

字体本身引起(还需调研)

根据字体不同,ua不同,结果均不同。
该问题产生的偏差基本较小,且无法一一兼容。
可看文章line-height和字体实际高度的计算加深理解

line-height与font-size计算值之差为奇数(理论上是这样,但实际上影响因素太多)

line-height与font-size计算值之差为奇数时,上下平分后产生小数点。 ua支持小数的平分,ua不支持小数的,上边多还是下边多取决于ua的规则。

android字体小于等于10px

一、解决思路:

  1. 尝试字体大于10px
  2. 尝试font-size:10px,line-height为奇数如15px、17px
  3. 尝试将原来的字体放大2倍,再使用scale缩小
  4. 尝试内部文字vertical-align: -2px
  5. 尝试其它垂直居中方法,如:table、flex、position


二、分析过程(上IOS,下Android):

可在移动端浏览demo,IOS为iPhone6 10.1.1,Android为Galaxy Note3 Lite 4G v4.3

  1. 12px

  2. 11px

  3. 10px

  4. 20px与scale(.5)

  5. tabel垂直居中

  6. flex垂直居中

  7. posotion relative absolute垂直居中

三、最终解决方案:

  1. 字体大于10px
  2. 字体小于等于10px的按钮或标签使用图片替代
  3. 使用position relative与absolute进行的定位
    该方法局限性较大,需要元素固定宽度与高度才能实现
  4. 将原来的字体放大2倍,再使用scale缩小
    IOS与Android均可垂直居中,但是因为scale缩放占据的原始尺寸不变,导致占用空间过大。
    该解决方案的应用场景: 当标签不在正常文档流时,如positioin:absolute时,可以使用
    .bx-label{
font-size: 20px;
transform: scale(0.5);
}
    zoom与transform:scale的区别 zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化
  5. 内部文字vertical-align: -2px
    IOS稍稍偏下,android可垂直居中
    该方法会让元素高度增加2px,并且基线位置会向下偏移2px
    该解决方案的适用性更大一点,非要解决IOS稍稍偏下问题,那只能通过判断UA来区分IOS与Android样式不同了
    <div class="padding:1px 3px;font-size: 10px;background-color: #f43030;">
 <span style="vertical-align: -2px"></span>
</div>

四、参考:

  1. android浏览器下line-height垂直居中为什么会偏离？
  2. Android浏览器下line-height垂直居中为什么会偏离？
  3. 我对CSS vertical-align的一些理解与认识（一）
  4. line-height和字体实际高度的计算

results matching ""

    No results matching ""