如何垂直和水平對齊另一個div內的div？

如何在另一個div內垂直和水平對齊div？如何垂直和水平對齊另一個div內的div？

基本上，我試圖對齊<div id="middle2">裏面<div id="middle">。

<div id="middle"> 
    <div id="middle2"> 
     <span id="sp1"class="ui-icon ui-icon-circle-triangle-w" style="float:left;"></span> 
     <div class="middleContent"></div> 
      <span id="sp2" class="ui-icon ui-icon-circle-triangle-e" style="float:left;"></span> 
     </div>

這是我試過的CSS：

.middleContent 
{ 
    background-color: white; 
    height: 22px; 
    width: 90%; 
    border: 1px solid #252C3E; 
    float: left; 
} 
#middle2 
{ 
    margin: auto; 
}

來源

2011-09-27 Bruc Walker

垂直對齊不像水平對齊那麼簡單。 ** [本頁]（http://blog.themeforest.net/tutorials/vertical-centering-with-css/）**解釋了實現垂直對齊的幾種不同方法。 – Anson

感謝rfausak指着我的文章，垂直對齊正在工作，但不是水平。 –

對於水平對齊，對你的「middle」div使用'text-align：center;'，爲你的「middle2」div使用'margin：auto'。 – Anson

http://phrogz.net/css/vertical-align/index.html在這個題目的所有文章的文章。

來源

2011-09-27 16:31:28 AlienWebguy

+1我全心全意同意。 – Maverick

您是否試圖水平對齊middle div內的middle2 div？你還沒有指定寬度，所以兩個div將具有相同的寬度，而水平對齊在這裏不會做任何事情。

我想你想要的是水平對齊middle2 div內的middleContent div。由於middleContent設置爲90％寬度，因此水平對齊的效果應該很明顯。爲此，請將以下內容添加到您的CSS代碼中：

#middle2 { 
    text-align: center; 
} 

#middleContent { 
    margin: auto; 
}

應該這樣做。如果仍然無效，請用您的最新代碼更新您的問題。

來源

2011-09-27 18:45:08 Anson

如何垂直和水平對齊另一個div內的div？

回答

相關問題