it-swarm.com.ru

выравнивание по вертикали с Bootstrap 3

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

844
corinem

Этот ответ представляет собой взлом, но я настоятельно рекомендую вам использовать flexbox (как указано в @ Haschem answer ), поскольку теперь он поддерживается везде.

Демонстрационная ссылка:
- Bootstrap
- 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>

Bootply

Использование 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 пробелов). Так что...

Enter image description here

Давайте пнуть это дополнительное пространство!

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

Enter image description here

Обратите внимание на кажущиеся бесполезные комментарии <!-- ... -->? Они важны - без них пробел между элементами <div> будет занимать место в макете, нарушая систему сетки.

Примечание: Bootply был обновлен

902
zessx

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

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

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

- CSS Legendary Эрик Мейер на W3Conf 201

Flexible Box (или вкратце Flexbox) - это новая система макетов, специально разработанная для макетов. состояние спецификации :

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

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


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

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

Результат

Vertical aligned columns in Twitter Bootstrap

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

Уточнение по align-items: center

8.3 Выравнивание по оси: свойство align-items

элементы Flex можно выровнять по поперечная ось текущей строки контейнера Flex, аналогично justify-content , но в перпендикулярном направлении. align-items устанавливает выравнивание по умолчанию для всех элементов гибкого контейнера, включая анонимные flex items .

align-items: center; По центральному значению поле поля flex item центрируется в поперечная ось внутри строки.


Большая тревога

Важное примечание # 1: Twitter 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 s подход .

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

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

Если вы нажмете "Переключить скомпилированное представление" в Demo , вы увидите префиксную версию объявлений 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  */
}

Результат

Full-height columns with vertical aligned contents in Twitter Bootstrap

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

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


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


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

866
Hashem Qolami

Следующий код работал для меня:

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

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

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

Обновление 2018

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

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

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

Bootstrap 4

Теперь, когда Bootstrap 4 является flexbox по умолчанию , существует много разных подходов к вертикальному выравниванию с использованием: авто-поля , утилиты flexbox или утилиты отображения вместе с утилиты выравнивания по вертикали . Поначалу "утилиты вертикального выравнивания" кажутся очевидными, но они only работают с элементами inline и table display. Вот некоторые 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>

Bootstrap 4 - Вертикальный центр с использованием авто-полей Демонстрация

my-auto представляет поля на вертикальной оси Y и эквивалентен:

margin-top: auto;
margin-bottom: auto;

2 - Вертикальный центр с Flexbox:

Vertical center grid columns

Поскольку 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>

Bootstrap 4 - Вертикальный центр столбцов разной высоты Демонстрация


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>

Bootstrap 4 - Вертикальный центр с использованием утилит дисплея Демонстрация

См. Также: Центр выравнивания по вертикали в Bootstrap 4


Bootstrap 3

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

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

Преобразуйте метод 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 методов центрирования

22
Zim

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

21
Manuszep

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

20
Kevin Nelson

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

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

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

20
user1477388

Это моё решение. Просто добавьте этот класс в ваш контент 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>
14
Edvard Åkerberg

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

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

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

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

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------
13
Ryan Alexander

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

10
babycakes

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

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

8
Kingsley Ijomah

Там нет необходимости для таблицы и таблицы клеток. Это может быть легко достигнуто с помощью преобразования.

Пример: 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>
7
Arvind Bhardwaj

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

Я считаю, что они работают фантастически хорошо, когда я хочу сохранить отзывчивость и конфигурируемость сеточной системы 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>
7
Gerbus

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

Если вы используете 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>
6
sb.olofsson

Поведение 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>

Источник: Flex · Bootstrap

4
Mr. Robot

Хорошо, случайно я смешал несколько решений, и теперь он, наконец, работает для моего макета, где я попытался создать таблицу 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>
3
godblessstrawberry
    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>
2
Nambi N Rajan

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

  1. Использование

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

    и CSS контейнера для

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

  3. Используйте относительные отступы

    Т.е. указать отступы в%

1
Amaan Iqbal

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

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

С Bootstrap 4 (который сейчас находится в альфа-режиме) вы можете использовать класс .align-items-center. Таким образом, вы можете сохранить отзывчивый характер Bootstrap. Работает сразу хорошо для меня. Смотрите Документация по Bootstrap 4 .

0
DiCaprio

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;
}
0
Pacific P. Regmi