css - 试图将容器 div 中的 div 居中

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 fiddle http://jsfiddle.net/RBkmv/