详解HTML中字体使用line-height依然不能垂直居中解决办法

来源：脚本之家时间：2020-10-26

这篇文章主要介绍了详解HTML中字体使用line-height依然不能垂直居中解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

以图片所示的效果为例，显然我们不仅要使“下一步”文本水平居中，还要垂直居中，此时我们写代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   #next-button{
              height: 54px;
       text-align: center;
       color: #fff;
       background: #e2231a;
       line-height: 54px;
       font:16px "Microsoft YaHei","Hiragino Sans GB";
       cursor: pointer;
       margin: 0 auto;
       width:400px;
   }

  </style>
</head>
<body>
  <div id="next-button">下一步</div>
</body>
</html>

在其中，我们设置了宽度、高度、背景颜色、字体以及水平与垂直居中，然而，我们却得到了这样的效果：

我们设置的文本垂直居中并没有效果。而我们改代码为

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   #next-button{
       width:400px;
       height: 54px;
       text-align: center;
       color: #fff;
       background: #e2231a;
       font:16px/54px "Microsoft YaHei","Hiragino Sans GB";
       cursor: pointer;
       margin: 0 auto;
   }
  </style>
</head>
<body>
  <div id="next-button">下一步</div>
</body>
</html>