Question

这是我的CSS：

#main {
  background: #eae8dc;
  margin: 0 auto;
  width: 790px;
  height: 900px;
  position: relative;
  display: block;
}
#header-container {
  display: inline-block;
  height: 118px;
  width: 648px;
  background: #9ed5de;
  margin: 11px auto;
}

这是HTML

<div id="main">
   <header>
     <h1 id="header-container">
     </h1>
   </header>
</div>

这个问题有助于解决我的保证金问题，但现在我似乎无法将标题容器集中在一起。 Why does this CSS margin-top style not work?

Answer 1

Text-align应该可以帮助您集中精力：

#main {
  background: #eae8dc;
  margin: 0 auto;
  width: 790px;
  height: 900px;
  position: relative;
  display: block;
   text-align: center;
}
#header-container {
  display: inline-block;
  height: 118px;
  width: 648px;
  background: #9ed5de;
  margin: 11px auto;
}

这是JS小提琴http://jsfiddle.net/RBkmv/

Answer 2

这是不好的做法。您应该为header元素设置样式，而不是h1元素。 See example

#main {
  background: #eae8dc;
  margin: 0 auto;
  width: 790px;
  height: 900px;
  position: relative;
  display: block;
   text-align: center;
}
header {
  display: inline-block;
  height: 118px;
  width: 648px;
  background: #9ed5de;
  margin: 11px auto;
}

这样，你的CSS代码就可以了。

试图将div放在容器div中

2 个答案: