如何使包装器div而不是内容居中

时间:2012-01-02 12:51:02

标签: html5 html css3 positioning

我希望我的页面始终在浏览器中居中而不影响内容(例如align-text:center; does)。我想以我的包装器为中心..我该怎么做?

简化现有页面:

<div id="wrapper">       
    <div id="header">
        Music Heaven
    </div>
    <div id="topmeny">             
    </div>
    <div id="menu">        
    </div>        
    <div id="content">                  
    </div>           
    <div id="bottom">
        SiteAdmin
    </div>
</div>

整个小提琴:http://jsfiddle.net/EndQb/

3 个答案:

答案 0 :(得分:21)

 #wrapper {
     width: ...
     margin: 0 auto;
 }

无需设置text-align

答案 1 :(得分:2)

设置你的风格就像包装div一样。

#wrapper {

width: 841px;
margin: 0 auto;

}

这样,包装器div将始终根据您的屏幕宽度居中。我希望它有所帮助。

答案 2 :(得分:1)

你可以设置包装器div的margin属性,如下面的CSS

#wrapper { margin:20px auto }