我尝试在页面顶部以水平和垂直居中放置<h2>
元素的div。
的HTML
<div id="header"><h2>The header</h2></div>
的CSS
body{
margin:0;
padding:0;
}
#header{
width:100%;
height:100px;
background-color: #9C27B0;
line-height: 100px;
text-align: center;
}
我得到的怪异效果是div的顶部和窗口的上边缘之间有一个空间。
如果我只在div中(没有h2标记)中写入文本,则不会出现此类问题。但是,我找不到任何资料来解释为什么line-height和
<h>
标签产生奇怪的结果。 最佳答案
标题(从h1
到h6
)默认具有margin
,因此在这种情况下只需重置h2
:
body {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 100px;
background-color: #9C27B0;
line-height: 100px;
text-align: center;
}
h2 {
margin: 0
}
<div id="header">
<h2>The header</h2>
</div>