Простой проблема: как я могу вертикально выровнять СЖ в СЖ с помощью Bootstrap? Пример здесь (я хочу, чтобы вертикально выровнять child1a и child1b):
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;
}
.parent {
display: table;
table-layout: fixed;
}
.child {
display:table-cell;
vertical-align:middle;
text-align:center;
}
таблица-макет: фиксированная предотвращает разрыв функции кол-* классы.
Может и старая тема, но если кому-то нужна дополнительная помощь с этим делать следующие например (этот текст-в средней линии изображения, если она имеет большую высоту, то текст).
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;
}
Важно то, что я пропустил был на "поплавка: нет; том, что" так как он получил поплавок слева от начальной коль атрибутами.
Ура!
Для родителей: дисплей: таблица;`
Для ребенка: дисплей: стол-клеток;`
Затем добавить вертикальный-выровняйте: середина;`
Я могу сделать скрипку, но дома теперь, ура!
Так вот, это прекрасная скрипка:
.parent {
display:table;
}
.child {
display:table-cell;
vertical-align:middle;
text-align:center;
}
Мне пришлось добавить ширина: 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;
}
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;
}
Важные Примечания:
, А
подряд` и т. д.строку
или коль-*
теги.Усс:
div.item div {
background: #fdd;
table-layout: fixed;
display: table;
}
div.item div h4 {
height: 60px;
vertical-align: middle;
display: table-cell;
background: #eee;
}
Обратите внимание на добавлена таблица-макет и свойства отображения на кол-*
теги. Это должен быть применен к тегу(ы), которые коль-*
применяется; он выиграл'т помочь, на другие теги.
Принсен'ответом является лучшим выбором. Но, чтобы исправить проблему, где столбцы Дон'т крах его должен код быть окруженным проверить заявление СМИ. Таким образом эти стили применяются только при больших колонок активный. Вот обновленный полный ответ.
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;
}
}
Вы хотите 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>
С Bootstrap 4, Вы можете сделать это гораздо легче: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment