Div的父塊對齊

Question

#Menu 
{ 
    position: relative; 
    width: 90%; 
    margin: 0 auto; 
    height; 50px; 
    min-height: 50px; 
    padding: 5px; 
} 

和孩子塊：

#MenuItem 
{ 
    position: relative; 
    float: left; 

    margin: 0 auto; 
    margin-top: 2px; 
    margin-left: 5px; 
    margin-right: 5px; 

    text-align: center; 
    width: 142px; 
    height: 37px; 
} 

和HTML：

<div id="Menu"> 
     <div id="MenuItem"><span>Home</span></div> 
     <div id="MenuItem"><span>Home</span></div> 
     <div id="MenuItem"><span>Home</span></div> 
    </div> 

如何使MenuItem的div應在父DIV水平centrated？

Answer 1

<ul id="nav"> 
    <li><a href="/">Home</a></li> 
    <li><a href="/about/">About</a></li> 
    <li><a href="/work/">Work</a></li> 
    <li><a href="/clients/">Clients</a></li> 
    <li><a href="/contact/">Contact</a></li> 
</ul> 

和這裏是CSS

#nav{ 
    border:1px solid #ccc; 
    border-width:1px 0; 
    list-style:none; 
    margin:0; 
    padding:0; 
    text-align:center; 
} 
#nav li{ 
    display:inline; 
} 
#nav a{ 
    display:inline-block; 
    padding:10px; 
} 

Answer 2

下面的代碼應該這樣做

#Menu 
{ 
    position: relative; 
    width: 90%; 
    margin: 0 auto; 
    height; 50px; 
    min-height: 50px; 
    padding: 5px; 
    text-align: center; /* added this rule */ 
} 

#MenuItem 
{ 
    position: relative; 
    display: inline-block; /* changed from float:left */ 

    margin: 0 auto; 
    margin-top: 2px; 
    margin-left: 5px; 
    margin-right: 5px; 

    text-align: center; 
    width: 142px; 
    height: 37px; 
} 

此外，我會建議你使用

<ul id="Menu"> 
    <li>...</li> 
    <li>...</li> 
</ul> 

代替嵌套的div。