Центрирование 2 элементов внутри столбца Bootstrap

Question

Итак, если у меня есть только один элемент, в моем случае кнопка, я просто добавляю класс .center-block к этому элементу и центрируется.

<div class="form-group"> 
    <div class="col-sm-4 col-sm-offset-4"> 
     <button type="submit" class="btn btn-primary center-block">Element 1</button> 
    </div> 
</div> 

Но что, если у меня есть два элемента? Я попытался обернуть их в DIV и добавил .center-div класс следующим образом:

HTML:

<div class="form-group"> 
    <div class="col-sm-4 col-sm-offset-4"> 
     <div class="center-div"> 
      <button type="submit" class="btn btn-primary">Element 1</button> 
      <button type="submit" class="btn btn-primary">Element 2</button> 
     </div> 
    </div> 
</div> 

CSS:

.center-div { 
    display: inline-block; 
    margin-right: auto; 
    margin-left: auto; 
} 

.center-div почти такой же, как .center-block за исключением что я использовал display: inline-block; вместо display: block; так, чтобы он соответствовал размеру содержимого.

К сожалению, это не работает. Если я не изменю его на display: block; и не установит его фиксированную ширину, как 200px.

Что мне здесь не хватает?

Answer 1

Маржа справа и слева, установленная на авто, работает только при фиксированной ширине элемента. Поскольку ваш center-div теперь является встроенным блоком, вам нужно имущество text-align: center на своем контейнере.

<div style="text-align: center"> 
    <div class="center-div"> 
     <!-- inner elements --> 
    </div> 
</div> 

Я использовал атрибут стиля для удобства в этом примере

Answer 2

посмотреть, если это помогает:

.center-div { 
width: 50%; 
border: 1px solid black; 
display: inline-block; 
margin:0 auto; 
text-align: center; 
} 
body{ 
text-align: center; 
}