解决H5设置了line-height但并没有居中的问题

遇到的问题

  • 明明设置了line-height = height,但在H5页面里文字并没有居中。

原因

  • 因为line-height是两条基线之间的距离,当元素高度和font-size差距较大时,会出现不居中的情况。(PS:这个原因是在别的文章里看到的,没能完全理解,也不确定对不对,所以搬到这里仅供参考)

解决方案

1. 通过放大再缩小的方法,并不适用于所有情况。
.serve{
  width: 100px; 
  height: 40px;
  line-height: 40px;
  font-size: 24px;
  text-align: center;
  transform: scale(0.5);
}
2. 利用伪元素,有些情况下并不起作用。
.serve{
  width: 50px; 
  height: 20px;
  font-size: 12px;
  text-align: center;
}
.serve::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    margin-top: 4px;  // 这个值不固定,需要根据自身情况调整
}
3. 使用flex,个人觉得有点大材小用。
.serve{
  width: 50px; 
  height: 20px;
  display: flex;
  align-items: center;
  font-size: 12px;
  text-align: center;
}
4. 直接将全局的lang设置为zh即可,个人觉得此方法最简单快捷且有效。
上一篇:电子婚礼请柬制作技巧来了!手把手教你一分钟轻松制作!


下一篇:h5 移动端 调试工具有哪些?