怎么新建MySQL数据库
发布时间：2022-07-05
作者：admin
阅读：361
阅读：361
今天这篇我们来学习和了解“HTML页面中字体用line-height实现垂直居中失败怎么办”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“HTML页面中字体用line-height实现垂直居中失败怎么办”有一定的帮助。有这方面学习需要的朋友就继续往下看吧！
以上就是关于“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实现垂直居中失败怎么办”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理