尝试将div容器

Question

这里中居中一个div是我的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元素。 ​​

#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代码工作。