详解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>
    

的时候，就可以垂直居中。原因就在于如果样式声明列表中有line-height与font，则line-height无效，必须与font一起使用。只要样式声明中没有font，就可使用line-height来设置文本的垂直居中了。

到此这篇关于详解HTML中字体使用line-height依然不能垂直居中解决办法的文章就介绍到这了,更多相关line-height不能垂直居中内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！