Гибкая компоновка ящиков

С появлением CSS Flexible Box многие кошмары веб-дизайнеров ¹ были решены. Один из самых хакерских - вертикальное выравнивание. Теперь это возможно даже в неизвестных высотах.

"Два десятилетия махинаций заканчиваются. Возможно, не завтра, но скоро, и на всю оставшуюся жизнь".

- CSS Legendary Эрик Майер в W3Conf 2013

Гибкая коробка (или, короче говоря, Flexbox), представляет собой новую систему компоновки, специально предназначенную для компоновки. В спецификации указано:

Макет Flex внешне внешне похож на макет блока. Ему не хватает многих более сложные текстовые или документальные свойства, которые могут быть использованы в блочном макете, таком как поплавки и столбцы. Взамен он получает простоту и мощные инструменты для распределения пространства и выравнивания контента способами что Webapps и сложные веб-страницы часто нуждаются.

Как это может помочь в этом случае? Хорошо, посмотрим.

Вертикальные выровненные столбцы

Используя Twitter Bootstrap, у нас есть .row с некоторыми .col-* s. Все, что нам нужно сделать, это отобразить желаемый .row ² как 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 ", если вы собираетесь использовать этот подход на веб-сайтах или приложениях реального мира.

Для дальнейшего чтения, включая поддержку браузера, эти ресурсы были бы полезны:

• Mozilla Developer Network - гибкие блоки
• Руководство по Flexbox - CSS-трюкам
• HTML5Rocks - Flexbox быстрый
• SmashingMagazine - Центрирование элементов с помощью Flexbox
• Филип Уолтон - Решено Flexbox
• Могу ли я использовать: гибкий модуль компоновки ящиков

^{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="/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 и больше в строках, это отлично работает.

Я предпочитаю этот метод согласно Дэвид Уолш Вертикальный центр 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), но я хочу, чтобы все столбцы в данной строке все имели та же самая вертикальная высота (так что я могу затем вертикально выровнять их содержимое и иметь все столбцы в строке, имеющие общую середину).

CSS/Less:

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

HTML:

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

Это все, что вам нужно для вертикального выравнивания содержимого. Проверьте это в скрипке:

Jsfiddle

Я действительно нашел следующие работы кода, используя 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, это несколько обновленных руководств по вертикальному центру.

Bootstrap 4

Теперь, когда 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>

Вертикальный центр с использованием экранных приложений Демо

Я немного поработал над 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="/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="/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>

Есть несколько способов сделать это.

1.

display: table-cell;
vertical-align: middle;

а css контейнера -

display:table;

2. Используйте дополнение и медиа-экран для изменения отступов по отношению к размеру экрана. Экран Google @media, чтобы узнать больше

3. Использовать относительное заполнение то есть указать заполнение в терминах%

Надеюсь, что это поможет

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>

Источник: https://getbootstrap.com/docs/4.0/utilities/flex/

Попробуйте это,

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="/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;">

ссылка JsFiddle

На всякий случай кто-то хочет больше узнать о свойствах float:

W3Schools - Float