使用CSS來居中一個元素

Question

我想對齊網頁正常部分的元素。

有放置在頭的div內三個要素：包裹在一個錨定標記

1. 該網站的標誌（作爲圖像）應左對齊。
2. 包含一組垂直對齊的菜單元素右對齊的div。
3. 包含搜索框和go按鈕的表單。這必須在頁面中水平居中放置，並在左側顯示徽標，右側顯示菜單項。

所有這三個元素都應該對齊頭部div的底部。

我一直在摔跤，但似乎沒有任何工作。你能幫忙嗎？謝謝！

Answer 1

<div style="float: right;"> 
    <ul> 
     <li>Menu item</li> 
    </ul> 
</div> 
<div style="float: left;"> 
    <a href="/"><img style="border: 0;" src="something.png" /></a> 
</div> 
<div style="width: 300px; margin: 0 auto;"> 
    Search box 
</div> 

只是一個快速的樣機。

Answer 2

UPDATE：使用表/表單元格招，讓vertical-align: bottom;

你需要用你的馬努，標識和搜索框到<div>與display: table-cell; CSS規則。

的標記：

<div class="table header"> 
    <div class="table-cell"> 
     <div class="logo">&nbsp;</div> 
    </div> 
    <div class="table-cell"> 
     <div class="searchbox">&nbsp;</div> 
    </div> 
    <div class="table-cell"> 
     <div class="menu">&nbsp;<br/><br/><br/><br/><br/><br/><br/><br/></div> 
    </div> 
</div> 

和css：

.table { 
    display: table; /* our outer contaner should behave like table; */ 
    width: 100%; /* set width to 100% */ 
} 
.table-cell { 
    display: table-cell; /* our internal wrapper should behave like table cell to allow vertical-align */ 
    vertical-align: bottom; /* align all elements vertical */ 
    background: yellow; /* for debug purposes */ 
} 
.logo { 
    float: left; 
    width: 100px; 
    background: green; 
} 
.menu { 
    float: right; 
    width: 100px; 
    background: red; 
} 
.searchbox { 
    margin: 0 auto; 
    width: 100px; 
    background: blue; 
} 

完整的示例：http://jsfiddle.net/EREmH/4/