这篇文章主要介绍了详解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>
在其中，我们设置了宽度、高度、背景颜色、字体以及水平与垂直居中，然而，我们却得到了这样的效果：
我们设置的文本垂直居中并没有效果。而我们改代码为的时候，就可以垂直居中。原因就在于如果样式声明列表中有line-height与font，则line-height无效，必须与font一起使用。只要样式声明中没有font，就可使用line-height来设置文本的垂直居中了。
<!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>
到此这篇关于详解HTML中字体使用line-height依然不能垂直居中解决办法的文章就介绍到这了,更多相关line-height不能垂直居中内容请搜索站长课堂以前的文章或继续浏览下面的相关文章，希望大家以后多多支持站长课堂!
声明：本站所有信息内容均由用户自行发表，该内容观点仅代表用户本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。Email：tellusa@foxmail.com
