当前位置：主页 > 查看内容

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

发布时间：2021-04-06 00:00| 有 位朋友查看

简介：以 图片所示的效果为例，显然我们不仅要使下一步文本水平居中，还要垂直居中，此时我们写代码如下： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title/titlestyle#next-button{ height: 54px; text-align: center; color: #fff; background: #e2231a; line-hei……

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

<!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不能垂直居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！


原文链接：https://m.jb51.net/web/741614.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：html直接引用vue和element-ui的方法 下一篇：前端html换肤功能的实现代码

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐