Как центрировать два divs бок о бок?

Question

Я использую bootstrap, и у меня есть два контейнера внутри контейнера бутстрапа. Как это:

 <div class="container"> 
      <div id="container-map"> 
       aasdasd 
      </div> 
      <div id="container-buttons"> 
       asdasda 
      </div> 
     </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; для дивы).

<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>