如何將兩個div並排居中？

Question

我正在使用引導程序，並且引導程序容器中有兩個容器。 像這樣：

        <div class="container">
            <div id="container-map">
                aasdasd
            </div>
            <div id="container-buttons">
                asdasda
            </div>
        </div>

我想做的是將兩個div並排放置在主容器內，它們分別是＃container-map和＃container-buttons 。

這是我為兩個div定制的CSS：

#container-map,
#container-buttons {
    display: inline-block;
    margin: 0 auto 0 auto;
    width: 500px;
    height: 500px;
}

Answer 1

您是否有不想使用gridsystem內置的引導程序的原因？ 像這樣嗎

<div class="container">
    <div class="row">
        <div class="col-md-3 col-md-offset-3">
            <div class="container-map">
                asdf
            </div>
         </div>
         <div class="col-md-3">
             <div class="container-buttons">
                  asdf
              </div>
         </div>
    </div>
</div>

Answer 2

只需將CSS更改為此

#container-map,
#container-buttons {
   float: left;
   margin-left: auto;
}

兩個容器都將居中並排

Answer 3

您可以嘗試使用本示例中的代碼（使用text-align: center;在.container display:inline-block;用於div）。

<style>
.container {
  position:relative;
  text-align:center;
}
#dv1, #dv2 {
  display:inline-block;
  width:100px;
  margin:0 3px;
  background:#33f;
}
</style>

<div class="container">
  <div id="dv1">Div 1</div>
  <div id="dv2">Div 2</div>
</div>

Answer 4

您可以使用flex使兩個div的高度相等。 您可以參考該鏈接以找到支持該鏈接的瀏覽器。 看看這個：

 .container { display: flex; width: 400px; background: #eee; } .column { flex: 1; background: #fff; border: 1px solid #ccc; margin: 1px; } 

 <div class="container"> <div class="column"> <p>aasdasd</p> </div> <div class="column"> <p>asdasda</p> <p>asdasda</p> </div> </div>