兩個div並排

Question

基本上，我嘗試並排放置兩個div，這是我嘗試做的以下布局。

<div id="content">
    <div id="search">

    </div>
    <div id="results">
        <h2>Waiting!</h2>
    </div>
</div>

這是CSS，它們將這些div並排放置，但是當我希望它們居中時將其完全推到頁面的左側。

#content {

}
#search {
    float: left;
    width:​ 400px;
    height: 350px;
    margin: 10px auto;
    overflow: auto;

    -moz-box-shadow:​​ #555 0 0 8px;
    -webkit-box-shadow: #555 0 0 8px;
    -o-box-shadow: #555 0 0 8px;
    box-shadow: #555 0 0 8px;
}

#results {
    float: left;
    width: 400px;
    height: 350px;
    margin: 10px auto;
    overflow: auto;

    -moz-box-shadow: #555 0 0 8px;
    -webkit-box-shadow: #555 0 0 8px;
    -o-box-shadow: #555 0 0 8px;
    box-shadow: #555 0 0 8px;
}

Answer 1

您可以使用margin：0 auto將容器區域居中。 嘗試這個 -

#content{ margin: 0 auto; width: 90%; }

這可能會有所幫助。

Answer 2

您必須將包裝div居中以將兩個居中。 在這里嘗試一下http://jsfiddle.net/dAVub/

#content {
    width:800px;
    margin: 0 auto;
}    

Answer 3

有很多方法可以做到這一點，但是最重要的是，當內部元素浮動時，應該在容器上適當地設置overflow 。 例如，您可以將CSS完全替換為：

#content {
   overflow:hidden;  /* or auto, or visible */
   width:820px;
   margin-left:auto; /* not necessary by default */
   margin-right:auto; /* not necessary by default */
}

#content > div {
   float:left;
   margin: 10px auto;
   -moz-box-shadow:#555 0 0 8px;
    -webkit-box-shadow:#555 0 0 8px;
    -o-box-shadow:#555 0 0 8px;
    box-shadow:#555 0 0 8px;
}

Answer 4

將此添加到您的CSS

#content {
text-align:center;}

用display:inline-block;替換float:left display:inline-block; 在#search和#results

演示版