line-height设置文本垂直居中不生效

最新推荐文章于 2024-01-15 15:47:03 发布

原创最新推荐文章于 2024-01-15 15:47:03 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

问题描述：

使用line-height设置文本垂直居中不生效。

// html代码
<div class="box">让我居中</div>
// css代码
.box{
  width: 300px;
  height: 200px;
  line-height: 200px;
  font: 14px PingFangSC-Semibold;
  background: #999;
}

在这里插入图片描述

原因分析：

font 属性覆盖了line-height属性，所以line-height不生效。

解决方案：

font属性提取到line-height属性之前。
不使用font属性，分别设置字体相关样式。

// html代码
<div class="box">让我居中</div>
// css代码
.box{
  width: 300px;
  height: 200px;
  font: 14px PingFangSC-Semibold;
  line-height: 200px;
  background: #999;
}