如何垂直和水平对齐另一个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？

回答

相关问题