Как использовать вертикальное выравнивание в 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;
}
8 51
css3 twitter-bootstrap twitter-bootstrap-3

8 ответов:

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

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

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

69

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

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 слева от атрибутов bootstrap col.

Ура!

41

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

для детей: display: table-cell;

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

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

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

.parent {
   display:table;
}

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

мне пришлось добавить width: 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;
}
6

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

важное замечание:

  • The vertical-align: middle; display: table-cell; должен быть применен к тегу, к которому не применяются классы начальной загрузки; он не может быть 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-* применяется; это не поможет на других тегах.

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:

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

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

вы имеете в виду, что вы хотите 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>
-1

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

-3