гибкая компоновка коробки

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

" два десятилетия раскладки хаков подходят к концу. Может быть, не завтра, но скоро и на всю оставшуюся жизнь."

- CSS легендарный Эрик Мейер!--32--> at W3Conf 2013

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

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

как это может помочь в данном случае? Что ж, посмотрим.

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

используя Twitter Bootstrap у нас есть .rows имея некоторые .col-*s. Все, что нам нужно сделать, это отобразить желаемое .row² как контейнер box, а затем выровнять все его гибкий элементs (the столбцы) вертикально по 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, включая anonymous гибкий график работы пунктов.

align-items: center; По центральному значению,гибкий элементы в центре оси Креста в строке.

Большой Тревоге

важное примечание #1: Twitter Bootstrap не указывает width столбцов в дополнительных небольших устройствах, если вы не даете один из .col-xs-# классы для столбцов.

поэтому в этой конкретной демонстрации я использовал .col-xs-* классы для того, чтобы столбцы отображались правильно в мобильном режиме, потому что он указывает width из столбец явно.

но в качестве альтернативы вы могли бы выключить макет Flexbox просто путем изменения display: flex; to 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 ' s подход.

важное примечание #2: префиксы опущены из-за краткости. Синтаксис Flexbox был изменен в течение этого времени. Новый письменный синтаксис не будет работать в старых версиях веб-браузеров (но не так, как Internet Explorer 9! Flexbox поддерживается в Internet Explorer 10 и более поздних версиях).

это означает, что вы также должны использовать свойства с префиксом поставщика, такие как display: -webkit-box и так далее в рабочем режиме.

если вы нажмете на "Переключить Скомпилированный Вид" на демо, вы увидите префиксную версию объявлений CSS (благодаря Autoprefixer).

столбцы полной высоты с вертикальным выровненным содержимым

как вы видите на предыдущие демо, столбцы (элементы flex) больше не так высоки, как их контейнер (коробка контейнера 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  */
}

Выход

цветная область отображает поле заполнения столбцов.

последнее, но не менее обратите внимание, что демо и код фрагменты здесь призваны дать вам другую идею, обеспечить современный подход к достижению цели. Обратите внимание на "Большой Тревоге" раздел, если вы собираетесь использовать этот подход в реальных веб-сайтах или приложениях.

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

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

^{1. вертикально выровнять изображение внутри div с отзывчивой высотой2. Лучше использовать дополнительный класс, чтобы не изменять Twitter Bootstrap по умолчанию .row.}

ниже код работал для меня:

.vertical-align {
    display: flex;
    align-items: center;
}

попробуйте это в CSS div:

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

после принятого ответа, если вы не хотите настраивать разметку, для разделения проблем или просто потому, что вы используете 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 -*, чтобы я мог складывать 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 и-sm и больше в строках это работает нормально.

Я предпочитаю этот метод, так как в Дэвид Уолш вертикальный центр CSS:

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

на transform Не важно, он просто находит центр немного более точно. Internet Explorer 8 может быть немного менее центрирован в результате, но это все еще неплохо -могу ли я использовать-Transforms 2d.

обновить 2018

я знаю, что первоначальный вопрос был для Bootstrap 3, но теперь, когда Bootstrap 4 был выпущен, вот некоторые обновленные рекомендации по вертикальному центру.

важно! вертикальный центр относительно высота родитель

если родитель элемента, который вы пытаетесь центрировать, не определен высота, нет вертикальных центрирующих решений будет работать!

Bootstrap 4

теперь, когда BS4 flexbox по умолчанию существует множество различных подходов к вертикальному выравниванию с использованием:авто-отступы, на основе утилиты или дисплей utils вместе с вертикальное выравнивание utils. Сначала" вертикальное выравнивание utils " кажется очевидным, но эти только работа с элементами дисплея встроенных и таблицы. Вот несколько вариантов вертикального центрирования Bootstrap 4..

1 - Вертикальный Центр С Использованием Автоматических Полей:

другой способ вертикального центра-использовать my-auto. Это центрирует элемент внутри контейнера. Например, h-100 делает строку полной высоты, и my-auto вертикально-центр .

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

BS4 - вертикальная центр с использованием auto-margins демо

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 to вертикально выровнять по центру все 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>

BS4-вертикальный центр различной высоты столбцов демо

3-Вертикальный Центр С Помощью Дисплея Utils:

Bootstrap 4 имеет дисплей utils это можно использовать для display:table, display:table-cell, display:inline, etc.. Они могут быть использованы с вертикальное выравнивание utils выровнять inline, 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>

BS4-вертикальный центр с помощью дисплея utils демо

Также см.: вертикальное выравнивание центра в Bootstrap 4

Bootstrap 3

метод Flexbox на контейнере элемента(ов) в центр:

.display-flex-center {
    display:flex;
    align-items:center;
}

Transform translateY метод:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

дисплей встроенный метод:

.display-inline-block {
    display:inline;
}
.display-inline-block > div {
    display:inline-block;
    float:none;
    vertical-align: middle;
}

демонстрация методов центрирования Bootstrap 3

Я просто сделал это, и он делает то, что я хочу это делать.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

и теперь моя страница выглядит так:

<div class='container-fluid align-middle'>
    content

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------

Я искренне считаю, что следующий код работает с использованием 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;
}

Bootply Link

вам может потребоваться изменить высоты (в частности, на .v-center) и удалить/изменить div на div[class*='col-'] для ваших нужд.

Это мое решение. Просто добавьте этот класс в свой css.

.align-middle {
  display:flex;
  justify-content:center;
  align-items:center;
}

тогда ваш HTML будет выглядеть так.

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display:flex;
  justify-content:center;
  align-items:center;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

я столкнулся с этой же проблемой. В моем случае я не знал высоты внешнего контейнера, но вот как я его зафиксировал:

Сначала установите высоту для вашего 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>

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

Jsfiddle

если вы используете меньше версия Bootstrap и компиляция в CSS самостоятельно, вы можете использовать некоторые классы утилит для использования с классами Bootstrap.

Я нашел, что они работают фантастически хорошо, где я хочу сохранить отзывчивость и конфигурируемость системы сетки начальной загрузки (например, используя -md или -sm), но я хочу, чтобы все столбцы в данной строке имели одинаковую вертикальную высоту (так что я могу вертикально выровнять их содержимое и иметь все столбцы в строке имеют общую середину).

CSS/меньше:

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

Я немного подробнее ответ zessx, сделать его более легким использовать смешивая различные размеры столбца на различных размерах экрана.

Если вы используете Сасс, вы можете добавить это в свой 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 с загрузочными столбцами с наименьшим разрешением.

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

поведение Flex изначально поддерживается начиная с Bootstrap 4. Добавить d-flex align-items-center на row div. Вам больше не нужно изменять 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/

    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;

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

2. используйте относительную прокладку т. е. укажите заполнение в терминах %

надеюсь, что это помогает

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

.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 Документация.

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

я столкнулся с той же ситуацией, когда я хотел выровнять несколько элементов div вертикально в строке и обнаружил, что Bootstrap classes col-xx-xx применяет стиль к div как float: left.

мне пришлось применить стиль к элементам div, таким как style="Float:none", и все мои элементы div начали выравниваться по вертикали. Вот рабочий пример:

<div class="col-lg-4" style="float:none;">

JsFiddle Ссылке

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

W3Schools-Float