为什么不能实现垂直居中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | *{ 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积分~
来为老师/同学的回答评分吧