Как использовать вертикальное выравнивание в бутстрапе

Простая проблема: как вертикально выровнять col внутри col, используя bootstrap? Пример здесь (я хочу вертикально выровнять child1a и child1b):

http://bootply.com/73666

HTML

<div class="col-lg-12">

  <div class="col-lg-6 col-md-6 col-12 child1">
    <div class="col-12 child1a">Child content 1a</div>
    <div class="col-12 child1b">Child content 1b</div>

  </div>


  <div class="col-lg-6 col-md-6 col-12 child2">
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>

  </div>

</div>

UPDATE

Некоторые CSS:

.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;


}

  .child1a, .child1b{
  border:4px solid black;
  display:inline-block !important;
}

.child1{
  border:4px solid blue;
  height:300px;
  display:table-cell !important;
  vertical-align:middle;
}

.child2{
  border:4px solid red;
}

Ответы

Ответ 1

.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

table-layout: fixed предотвращает нарушение функций классов col.

Ответ 2

Может быть, старая тема, но если кому-то нужна дополнительная помощь, сделайте следующее, например (это помещает текст в среднюю линию изображения, если он имеет большую высоту, чем текст).

HTML:

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS

.display-table{
    display: table;
    table-layout: fixed;
}

.display-cell{
    display: table-cell;
    vertical-align: middle;
    float: none;
}

Важная вещь, которую я пропустил, была "float: none"; поскольку он получил float слева от атрибутов бутстрапа col.

Ура!

Ответ 3

Для родителя: display: table;

Для ребенка: display: table-cell;

Затем добавьте vertical-align: middle;

Я могу сделать скрипку, но домашнее время, yay!

Хорошо, вот прекрасная скрипка: http://jsfiddle.net/lharby/AJAhR/

.parent {
   display:table;
}

.child {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}

Ответ 4

Мне пришлось добавить ширину: 100%; для отображения таблицы, чтобы исправить некоторые странные bahavior в IE и FF, когда я использовал этот пример. У IE и FF возникли проблемы с отображением тегов col-md- * с правой шириной

.display-table {
        display: table;
        table-layout: fixed;
        width: 100%;
}

.display-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
}

Ответ 5

http://jsfiddle.net/b9chris/zN39r/

HTML:

<div class="item row">
    <div class="col-xs-12 col-sm-6"><h4>This is some text.</h4></div>
    <div class="col-xs-12 col-sm-6"><h4>This is some more.</h4></div>
</div>

CSS

div.item div h4 {
    height: 60px;
    vertical-align: middle;    
    display: table-cell;
}

Важные замечания:

  • vertical-align: middle; display: table-cell; должен применяться к тегу, для которого не применяются классы Bootstrap; он не может быть col-*, a row и т.д.
  • Это невозможно сделать без этого лишнего, возможно бессмысленного тега в вашем HTML, к сожалению.
  • Фоны не нужны - они просто для демонстрационных целей. Таким образом, вам не нужно применять специальные правила к тегам row или col-*.
  • Важно заметить, что внутренний тег не растягивается до 100% от ширины его родителя; в нашем сценарии это не имело значения, но это может быть для вас. Если это так, вы получите что-то более близкое к некоторым другим ответам здесь:

http://jsfiddle.net/b9chris/zN39r/1/

CSS

div.item div {
    background: #fdd;
    table-layout: fixed;
    display: table;
}
div.item div h4 {
    height: 60px;
    vertical-align: middle;    
    display: table-cell;
    background: #eee;
}

Обратите внимание на добавленные свойства макета таблицы и отображения в тегах col-*. Это должно применяться к тегам (методам), которые применяют col-*; это не поможет в других тегах.

Ответ 6

Ответ Prinsen - лучший выбор. Но, чтобы исправить проблему, когда столбцы не сворачиваются, его код должен быть окружен оператором проверки СМИ. Таким образом, эти стили применяются только при активном использовании больших столбцов. Вот обновленный полный ответ.

HTML:

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS

@media (min-width: 768px){
   .display-table{
       display: table;
       table-layout: fixed;
   }

   .display-cell{
       display: table-cell;
       vertical-align: middle;
       float: none;
   }
}

Ответ 7

Вы хотите, чтобы 1b и 1b были бок о бок?

 <div class="col-lg-6 col-md-6 col-12 child1">
      <div class="col-6 child1a">Child content 1a</div>
      <div class="col-6 child1b">Child content 1b</div>
 </div>