为什么不能实现垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>留言板首页</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="header"> <div class="title"> I'm here </div> </div> </body> </html>
*{
margin:0;
padding:0;
}
.header{
width: 100%;
height: 150px;
background-color: #E0E0E0;
position: relative;
}
.header .title{
width:400px;
height: 100px;
border:5px solid #E0FFFF;
border-radius: 8px;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto auto;
line-height: 150px;
text-align: center;
font:40px italic bolder;
font-family:'Microsoft YaHei';
}div设置了高度与行高相等，那里面的文字为什么不能垂直居中？
0
收起
正在回答
2回答
你好，如下：
font属性包含line-height，如果直接使用font来设置字体，相当于用默认的line-height把你前面设置的line-height覆盖掉了，不起作用，把font需要设置的属性拆开大单独设置就好了，结果如下：
如果解决了你的问题，请采纳，祝学习愉快~
PHP小白零基础入门
- 参与学习 人
- 提交作业 626 份
- 解答问题 4928 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星