Я использую Twitter Bootstrap 3, и у меня проблемы, когда я хочу выровнять по вертикали две div
, например - ссылка JSFiddle:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
В сетке в Bootstrap используется float: left
, а не display:inline-block
, поэтому свойство vertical-align
не работает. Я попытался использовать margin-top
, чтобы исправить это, но я думаю, что это не очень хорошее решение для гибкого дизайна.
Этот ответ представляет собой взлом, но я настоятельно рекомендую вам использовать flexbox (как указано в @Haschem answer), так как теперь он поддерживается повсюду (закрыто вверх I9)
Ссылка Demos:
- Bootstrap 3
- Bootstrap 4 alpha 6
Вы по-прежнему можете использовать собственный класс, если вам это нужно:
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
<div class="row">
<div class="col-xs-5 col-md-3 col-lg-1 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Использование inline-block
добавляет дополнительное пространство между блоками, если вы разрешаете реальное пространство в вашем коде (например, ...</div> </div>...
). Это дополнительное пространство разбивает нашу сетку, если размеры столбцов составляют до 12:
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Здесь у нас есть дополнительные пробелы между <div class="[...] col-lg-2">
и <div class="[...] col-lg-10">
(возврат каретки и 2 вкладки /8 пробелов). И так...
Пусть ударьте это дополнительное пространство!!
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Обратите внимание на кажущиеся бесполезными комментарии <!-- ... -->
? Они важны. Без них пробелы между элементами <div>
занимают место в макете, разбивая систему сетки.
Примечание: Bootply обновлен
С появлением CSS Flexible Box многие кошмары веб-дизайнеров 1 были решены. Один из самых хакерских - вертикальное выравнивание. Теперь это возможно даже в неизвестных высотах.
"Два десятилетия махинаций заканчиваются. Возможно, не завтра, но скоро, и на всю оставшуюся жизнь".
- CSS Legendary Эрик Майер в W3Conf 2013
Гибкая коробка (или, короче говоря, Flexbox), представляет собой новую систему компоновки, специально предназначенную для компоновки. В спецификации указано:
Макет Flex внешне внешне похож на макет блока. Ему не хватает многих более сложные текстовые или документальные свойства, которые могут быть использованы в блочном макете, таком как поплавки и столбцы. Взамен он получает простоту и мощные инструменты для распределения пространства и выравнивания контента способами что Webapps и сложные веб-страницы часто нуждаются.
Как это может помочь в этом случае? Хорошо, посмотрим.
Используя Twitter Bootstrap, у нас есть .row
с некоторыми .col-*
s. Все, что нам нужно сделать, это отобразить желаемый .row
2 как flex container, а затем выровнять все его flex item (столбцы) по вертикали align-items
свойство.
ПРИМЕР ЗДЕСЬ (Пожалуйста, внимательно прочитайте комментарии)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
Цветная область отображает колоду столбцов.
align-items: center
8.3 Поперечное осевое выравнивание: свойство
align-items
Элементы Flex можно выровнять по
justify-content
, но в перпендикулярном направлении.align-items
устанавливает выравнивание по умолчанию для всех элементов контейнера flex, включая анонимный flex items.
align-items: center;
По значению центра значение поля flex item сосредоточено в поперечной оси в строке.
Важное примечание # 1: Щебетать Bootstrap не указывает столбцы width
в дополнительных маленьких устройствах, если вы не дадите один из классов .col-xs-#
столбцам.
Поэтому в этой конкретной демонстрации я использовал классы .col-xs-*
для правильного отображения столбцов в мобильном режиме, потому что он явно указывает width
столбца.
Но в качестве альтернативы вы можете отключить макет Flexbox, просто изменив display: flex;
на display: block;
в определенных размерах экрана. Например:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
Или вы могли указать .vertical-align
только для определенных размеров экрана:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
В этом случае я бы пошел с @KevinNelson .
Важное примечание # 2: Префикс поставщика пропущен из-за краткости. Синтаксис Flexbox был изменен за время. Новый письменный синтаксис не будет работать в более старых версиях веб-браузеров (но не тот старый, как Internet Explorer 9! Flexbox поддерживается в Internet Explorer 10 и более поздних версиях).
Это означает, что вы должны также использовать свойства с префиксом поставщика, такие как display: -webkit-box
и т.д. в рабочем режиме.
Если вы нажмете "Toggle Compiled View" в Demo, вы увидите префиксную версию объявлений CSS (благодаря Autoprefixer).
Как вы видите в предыдущей демонстрации , столбцы (элементы гибкости) уже не так высоки, как их контейнер (поле контейнера flex. т.е. элемент .row
).
Это связано с использованием значения center
для свойства align-items
. Значение по умолчанию stretch
, так что элементы могут заполнять всю высоту родительского элемента.
Чтобы исправить это, вы можете добавить display: flex;
в столбцы:
ПРИМЕР ЗДЕСЬ (Опять же, обратите внимание на комментарии)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
Цветная область отображает колоду столбцов.
Наконец, но не менее важно, обратите внимание на то, что демонстрации и фрагменты кода здесь предназначены для того, чтобы дать вам другую идею, чтобы обеспечить современный подход для достижения цели. Пожалуйста, обратите внимание на раздел Big Alert ", если вы собираетесь использовать этот подход на веб-сайтах или приложениях реального мира.
Для дальнейшего чтения, включая поддержку браузера, эти ресурсы были бы полезны:
1. Вертикально выравнивать изображение внутри div с гибкой высотой 2. Лучше использовать дополнительный класс, чтобы не изменять настройки Twitter Bootstrap по умолчанию .row
.
Попробуйте это в CSS div:
display: table-cell;
vertical-align: middle;
Следующий код работал у меня:
.vertical-align {
display: flex;
align-items: center;
}
В соответствии с принятым ответом, если вы не хотите настраивать разметку, для разделения проблем или просто потому, что используете CMS, следующее решение работает нормально:
.valign {
font-size: 0;
}
.valign > [class*="col"] {
display: inline-block;
float: none;
font-size: 14px;
font-size: 1rem;
vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Ограничение здесь заключается в том, что вы не можете наследовать размер шрифта из родительского элемента, потому что строка устанавливает размер шрифта в 0 для удаления пробела.
Я думал, что поделюсь своим "решением", если он поможет кому-то еще, кто не знаком с самими вопросами @media.
Благодаря ответу @HashemQolami, я построил несколько медиа-запросов, которые будут работать мобильными, например col- * classes, чтобы я мог складывать col * для мобильных устройств, но отображал их по вертикали в центре для больших экранов, например,
<div class='row row-sm-flex-center'>
<div class='col-xs-12 col-sm-6'></div>
<div class='col-xs-12 col-sm-6'></div>
</div>
.
.row-xs-flex-center {
display:flex;
align-items:center;
}
@media ( min-width:768px ) {
.row-sm-flex-center {
display:flex;
align-items:center;
}
}
@media ( min-width: 992px ) {
.row-md-flex-center {
display:flex;
align-items:center;
}
}
@media ( min-width: 1200px ) {
.row-lg-flex-center {
display:flex;
align-items:center;
}
}
Более сложные макеты, для которых требуется разное количество столбцов для разрешения экрана (например, 2 строки для -xs, 3 для -sm и 4 для -md и т.д.), потребуют более продвинутого финалирования, но для простой страницы с -xs stacked и -sm и больше в строках, это отлично работает.
clear: both;
к классам внутри медиа-запросов, чтобы заставить это работать.
.row
... поэтому он должен выглядеть как class="row row-sm-flex-center"
Определение BS3 .row
обрабатывает clear:both;
Я предпочитаю этот метод согласно Дэвид Уолш Вертикальный центр CSS:
.children{
background: #ffdb4c;
height: 300px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
transform
не является существенным; он просто находит центр немного точнее. Internet Explorer 8 может быть немного меньше по центру, но все равно не так - Могу ли я использовать - Transforms 2d.
Я просто сделал это, и он делает то, что я хочу.
.align-middle {
margin-top: 25%;
margin-bottom: 25%;
}
И теперь моя страница выглядит как
<div class='container-fluid align-middle'>
content
----------------------------------
| |
| -------------------------- |
| | | |
| | | |
| | | |
| | | |
| | | |
| -------------------------- |
| |
----------------------------------
Если вы используете Less версию Bootstrap и самостоятельно компилируете в CSS, вы можете использовать некоторые классы полезности для использования с Начальные классы.
Я нашел, что они работают фантастически хорошо, где я хочу сохранить отзывчивость и настраиваемость сетки Bootstrap (например, используя -md
или -sm
), но я хочу, чтобы все столбцы в данной строке все имели та же самая вертикальная высота (так что я могу затем вертикально выровнять их содержимое и иметь все столбцы в строке, имеющие общую середину).
.display-table {
display: table;
width: 100%;
}
.col-md-table-cell {
@media (min-width: @screen-md-min) {
display: table-cell;
vertical-align: top;
float: none;
}
}
.col-sm-table-cell {
@media (min-width: @screen-sm-min) {
display: table-cell;
vertical-align: top;
float: none;
}
}
.vertical-align-middle {
vertical-align: middle;
}
<div class="row display-table">
<div class="col-sm-5 col-sm-table-cell vertical-align-middle">
...
</div>
<div class="col-sm-5 col-sm-table-cell vertical-align-middle">
...
</div>
</div>
Я столкнулся с этой проблемой. В моем случае я не знал высоты внешнего контейнера, но именно так я его исправил:
Сначала установите высоту для элементов html
и body
, чтобы они составляли 100%. Это важно! Без этого элементы html
и body
просто наследуют высоту их детей.
html, body {
height: 100%;
}
Тогда у меня был внешний контейнерный класс с:
.container {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
И, наконец, внутренний контейнер с классом:
.inner-container {
display: table-cell;
vertical-align: middle;
}
HTML так же просто, как:
<body>
<div class="container">
<div class="inner-container">
<p>Vertically Aligned</p>
</div>
</div>
</body>
Это все, что вам нужно для вертикального выравнивания содержимого. Проверьте это в скрипке:
Я действительно нашел следующие работы кода, используя Chrome, а не другие браузеры, чем текущий выбранный ответ:
.v-center {
display:table!important; height:125px;
}
.v-center div[class*='col-'] {
display: table-cell!important;
vertical-align:middle;
float:none;
}
.v-center img {
max-height:125px;
}
Вам может потребоваться изменить высоту (в частности, на .v-center
) и удалить/изменить div на div[class*='col-']
для ваших нужд.
Обновление 2017
Я знаю, что исходный вопрос был для Bootstrap 3, но теперь, когда Bootstrap 4 находится в alpha, это несколько обновленных руководств по вертикальному центру.
Теперь, когда BS4, Alpha 6 по умолчанию flexbox, существует множество различных подходов к вертикальному выравниванию, используя: auto-margins, flexbox utils или дисплей utils вместе с вертикальные выравнивающие утилиты. Сначала "вертикальные выравнивающие утилиты" кажутся очевидными, но они работают только с встроенными и табличными элементами отображения. Вот несколько вариантов вертикального центрирования Bootstrap 4.
1 - Вертикальный центр с использованием автоматических полей:
Другим способом вертикального центра является использование my-auto
. Это будет центрировать элемент внутри контейнера. Например, h-100
делает высоту строки, а my-auto
будет вертикально центрировать столбец col-sm-12
.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Вертикальный центр с использованием автоматических полей Демо
my-auto
представляет поля на вертикальной оси y и эквивалентен:
margin-top: auto;
margin-bottom: auto;
2 - Вертикальный центр с Flexbox:
Так как Bootstrap 4 .row
теперь display:flex
, вы можете просто использовать align-self-center
для любого столбца, чтобы вертикально центрировать его...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
или используйте align-items-center
для всего .row
для вертикального выравнивания по центру col-*
в строке...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Вертикальный центр Различные столбцы высоты Демо
3 - Вертикальный центр с использованием экранных приложений:
Bootstrap 4 имеет display utils, который можно использовать для display:table
, display:table-cell
, display:inline
и т.д. Они могут использоваться с вертикальными настройками выравнивания для выравнивания встроенных, встроенных блоков или элементов ячейки таблицы.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Вертикальный центр с использованием экранных приложений Демо
mx-auto
(горизонтальное центрирование), поэтому имеет смысл, что my-auto
центрируется вертикально (ось y).
Я немного поработал над zessx answer, чтобы упростить его использование при смешивании разных размеров столбцов при разных размерах экрана.
Если вы используете Sass, вы можете добавить это в свой scss файл:
@mixin v-col($prefix, $min-width) {
@media (min-width: $min-width) {
.col-#{$prefix}-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
}
@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);
Что генерирует следующий CSS (который вы можете использовать непосредственно в своих таблицах стилей, если вы не используете Sass):
@media (min-width: 1200px) {
.col-lg-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 992px) {
.col-md-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 768px) {
.col-sm-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 480px) {
.col-xs-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
Теперь вы можете использовать его в своих динамических столбцах следующим образом:
<div class="container">
<div class="row">
<div class="col-sm-7 col-sm-v col-xs-12">
<p>
This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
</p>
</div><div class="col-sm-5 col-sm-v col-xs-12">
<p>
This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
</p>
</div>
</div>
<div class="row">
<div class="col-md-7 col-md-v col-sm-12">
<p>
This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
</p>
</div><div class="col-md-5 col-md-v col-sm-12">
<p>
This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
</p>
</div>
</div>
</div>
Нет необходимости в таблицах и таблицах. Это может быть легко достигнуто с помощью преобразования. Пример: http://codepen.io/arvind/pen/QNbwyM
код:
.child {
height: 10em;
border: 1px solid green;
position: relative;
}
.child-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
<div class="col-xs-6 col-lg-6 child">
<div class="child-content">
<div style="height:4em;border:1px solid #000">Big</div>
</div>
</div>
<div class="col-xs-6 col-lg-6 child">
<div class="child-content">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
</div>
ОК, случайно я перепутал несколько решений, и теперь он наконец работает для моего макета, где я попытался создать таблицу 3x3 с колонками Bootstrap с наименьшим разрешением.
/* required styles */
#grid a {
display: table;
}
#grid a div {
display: table-cell;
vertical-align: middle;
float: none;
}
/* additional styles for demo: */
body {
padding: 20px;
}
a {
height: 40px;
border: 1px solid #444;
}
a > div {
width: 100%;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="grid" class="clearfix row">
<a class="col-xs-4 align-center" href="#">
<div>1</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>2</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>3</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>4</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>5</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>6</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>7</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>8</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>9</div>
</a>
</div>
div{
border:1px solid;
}
span{
display:flex;
align-items:center;
}
.col-5{
width:100px;
height:50px;
float:left;
background:red;
}
.col-7{
width:200px;
height:24px;
float:left;
background:green;
}
<span>
<div class="col-5">
</div>
<div class="col-7"></div>
</span>
Есть несколько способов сделать это.
1.
display: table-cell;
vertical-align: middle;
а css контейнера -
display:table;
Используйте дополнение и медиа-экран для изменения отступов по отношению к размеру экрана. Экран Google @media, чтобы узнать больше
Использовать относительное заполнение то есть указать заполнение в терминах%
Надеюсь, что это поможет
HTML
<div class="row">
<div class="col-xs-2 pull-bottom"
style="height:100px;background:blue">
</div>
<div class="col-xs-8 pull-bottom"
style="height:50px;background:yellow">
</div>
</div>
CSS
.pull-bottom {
display: inline-block;
vertical-align: bottom;
float: none;
}
Поведение Flex поддерживается со стороны Bootstrap 4. Добавьте d-flex align-items-center
в div row
. Вам больше не нужно изменять свой CSS.
Простой пример: http://jsfiddle.net/vgks6L74/
<!-- language: html -->
<div class="row d-flex align-items-center">
<div class="col-5 border border-dark" style="height:10em"> Big </div>
<div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>
В вашем примере: http://jsfiddle.net/7zwtL702/
<!-- language: html -->
<div class="row d-flex align-items-center">
<div class="col-5">
<div class="border border-dark" style="height:10em">Big</div>
</div>
<div class="col-2">
<div class="border border-danger" style="height:3em">Small</div>
</div>
</div>
Попробуйте это,
.exe {
font-size: 0;
}
.exe > [class*="col"] {
display: inline-block;
float: none;
font-size: 14px;
font-size: 1rem;
vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row exe">
<div class="col-xs-5">
<div style="height:5em;border:1px solid grey">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid red">Small</div>
</div>
</div>
С помощью Bootstrap 4 (который теперь находится в alpha) вы можете использовать класс .align-items-center
. Таким образом, вы можете сохранить отзывчивый характер Bootstrap.
Сейчас работает отлично. См. Документация Bootstrap 4.
Я столкнулся с той же ситуацией, когда мне захотелось выровнять несколько элементов div вертикально подряд и обнаружил, что классы Bootstrap col-xx-xx применяют стиль к div как float: left.
Мне пришлось применить стиль к элементам div, например style = "Float: none", и все мои элементы div начались вертикально. Вот рабочий пример:
<div class="col-lg-4" style="float:none;">
На всякий случай кто-то хочет больше узнать о свойствах float:
div
, без текста внутри, что - то вроде этого jsfiddle.net/corinem/Aj9H9 , но в этом примере я не использую самозагрузки