如何垂直和水平对齐另一个div内的div？

Question

如何在另一个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;
}

Answer 1

http://phrogz.net/css/vertical-align/index.html关于此主题的所有文章的文章。

Answer 2

您是否尝试在middle2 div中水平对齐middle div？你没有指定宽度，所以两个div都有相同的宽度，水平对齐在这里不会做任何事情。

我认为你想要的是在middleContent div内水平对齐middle2 div。由于middleContent设置为90％宽度，因此水平对齐的效果应该是显着的。为此，请将以下内容添加到CSS代码中：

#middle2 {
  text-align: center;
}

#middleContent {
  margin: auto;
}

应该这样做。如果仍然无效，请使用您的最新代码更新您的问题。