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

Простой проблема: как я могу вертикально выровнять СЖ в СЖ с помощью 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>

Обновление

Некоторые 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;
}
edsioufi
Редактировал вопрос 12-го августа 2013 в 5:32
Программирование
css3 twitter-bootstrap-3 twitter-bootstrap
12-го августа 2013 в 4:31
25 просмотров
Комментарии к вопросу (1)
Решение
.parent {
    display: table;
    table-layout: fixed;
}

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

таблица-макет: фиксированная предотвращает разрыв функции кол-* классы.

Chris Moschini
Редактировал ответ 28-го июля 2014 в 5:22
Комментарии (4)

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

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>

Усс:

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

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

Важно то, что я пропустил был на "поплавка: нет; том, что" так как он получил поплавок слева от начальной коль атрибутами.

Ура!

prinsen
Редактировал ответ 10-го мая 2017 в 1:24
Комментарии (2)

Для родителей: дисплей: таблица;`

Для ребенка: дисплей: стол-клеток;`

Затем добавить вертикальный-выровняйте: середина;`

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

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

.parent {
   display:table;
}

.child {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}
moritzg
Редактировал ответ 9-го мая 2017 в 12:11
Комментарии (1)

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

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

.display-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
}
southz rgw
Редактировал ответ 29-го февраля 2016 в 4:08
Комментарии (2)

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>

Усс:

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

Важные Примечания:

  • Вертикального выравнивания: средний; дисплей: стол-клеток; должны быть применены к тегу, который имеет классы начальной загрузки применяется; она не может быть коль-*, Аподряд` и т. д.
  • Это может'т быть сделано без этого дополнительного, возможно, бессмысленно тег в HTML, к сожалению.
  • Фоны являются ненужными - они'вновь только для демонстрационных целей. Итак, вы Дон'т нужно применять какие-либо специальные правила в строку или коль-* теги.
  • Важно заметить внутренний тег не растягивается на 100% ширины родительского элемента; в нашем случае это не'т имеет значения, но он может вам. Если это произойдет, вы в конечном итоге с чем-то ближе к некоторые другие ответы здесь:

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

Усс:

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

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

Комментарии (0)

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

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>

Усс:

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

   .display-cell{
       display: table-cell;
       vertical-align: middle;
       float: none;
   }
}
Комментарии (0)

Вы хотите 1В а 1в чтобы быть бок о бок? 

 <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>
daniel__
Редактировал ответ 12-го августа 2013 в 5:02
Комментарии (3)

С Bootstrap 4, Вы можете сделать это гораздо легче: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment

Комментарии (0)