今天跟大家聊聊HTML字体应用line-height仍不可垂直居中解决方案,原文中根据实例编码介绍的特别详尽,对我们的学习或是工作中具备一定的参照学习使用价值,需要了解的朋友们下边随着云南仟龙Mark来一起学习学习吧!
以HTML字体应用line-height仍不可垂直居中解决方案_html图片所示的效果为例,显然我们不仅要使“下一步”文本水平居中,还要垂直居中,此时我们写代码如下:
<!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>
在其中,我们设置了宽度、高度、背景颜色、字体以及水平与垂直居中,然而,我们却得到了这样的效果:
HTML字体应用line-height仍不可垂直居中解决方案_html_02我们设置的文本垂直居中并没有效果。而我们改代码为
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#next-button{
width:400px;
height: 54px;
text-align: center;
<http://www.qlyl1688.com/>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仍不可垂直居中解决方案的文章就到这了,文章来源脚本之家,欢迎下次光临!!