Я використовую 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 ), оскільки він зараз підтримується повсюдно.

Демонстраційне посилання:
- 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 багато кошмарів веб-дизайнерів ¹ були вирішені. Один з найбільш хакітів, вертикальне вирівнювання. Зараз це можливо навіть у невідомих висотах .

"Два десятиліття злому макетів закінчуються. Можливо, не завтра, але незабаром, і на все життя".

- Легендарний CSS Ерік Мейєр на W3Conf 2013

Гнучка коробка (або коротше кажучи, Flexbox) - це нова система компонування, спеціально розроблена для цілей компонування. У специфікації зазначено :

Розкладка Flex поверхнево схожа на компонування блоків. Не вистачає багатьох більш складних властивостей, орієнтованих на текст або документ, які можна використовувати в компонуванні блоків, наприклад, поплавці та стовпці. Натомість він отримує прості та потужні інструменти для розповсюдження простору та вирівнювання вмісту способами, якими часто потрібні веб-сторінки та складні веб-сторінки.

Як це може допомогти в цьому випадку? Ну, подивимось.

Вертикально вирівняні стовпці

Використовуючи Twitter Bootstrap, у нас є .rowдеякі .col-*s. Все, що нам потрібно зробити, - це показати потрібний .row² у вигляді гнучких контейнерних коробок, а потім вирівняти всі його гнучкі елементи (стовпці) вертикально за 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властивість

Гнучкі елементи можна вирівняти в поперечній осі поточної лінії гнучких контейнерів, аналогічно, justify-contentале в перпендикулярному напрямку. align-itemsвстановлює вирівнювання за замовчуванням для всіх елементів контейнера flex, включаючи анонімні елементи flex .

align-items: center; За центральним значенням поле поля гнучких елементів розташовується в центрі поперечної осі в рядку.

Велика оповіщення

Важлива примітка №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в виробничому режимі властивості, встановлені префіксом постачальника, тощо .

Якщо ви натисніть на " Змінити перегляд компільованого перегляду" в демонстраційному вікні , ви побачите попередньо встановлену версію оголошень 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  */
}

Вихід

Кольорова область відображає коробку з колонкою.

І останнє, але не менш важливе , зауважте, що демонстрації та фрагменти коду тут мають на меті дати вам інше уявлення, запропонувати сучасний підхід для досягнення мети. Будь ласка, пам’ятайте про розділ « Велике сповіщення », якщо ви збираєтесь використовувати цей підхід на реальних веб-сайтах або в додатках.

Для подальшого читання, включаючи підтримку браузера, ці ресурси будуть корисні:

• Мережа розробників Mozilla - гнучкі коробки
• Керівництво по Flexbox - фокуси CSS
• HTML5Rocks - швидкий Flexbox
• SmashingMagazine - Елементи центрування за допомогою Flexbox
• Філіп Уолтон - вирішено Flexbox
• Чи можу я використовувати: гнучкий модульний макет коробки

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

Наведений нижче код працював для мене:

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

Оновлення 2020 року

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

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

Якщо батьківський елемент елемента, який намагається центрувати, не має визначеної висоти , жодне з рішень вертикального центрування не буде працювати!

Завантаження 4

Тепер, коли Bootstrap 4 за замовчуванням є flexbox, існує багато різних підходів до вертикального вирівнювання, використовуючи: автоматичні поля , утиліти flexbox або утиліти відображення разом з утилітами вертикального вирівнювання . Спочатку "утиліти вертикального вирівнювання" здаються очевидними, але вони працюють лише з елементами відображення вбудованого та таблиці. Ось кілька варіантів вертикального центрування 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 представляє поля на вертикальній осі у і еквівалентно:

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>

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

3 - Вертикальний центр за допомогою утилітів відображення:

Бутстрап 4 має дисплей утиліти , які можуть бути використані для 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 - вертикальний центр за допомогою демонстраційних утиліт Demo

Також дивіться: Центр вертикальної вирівнювання у завантажувальній системі 4

Завантаження 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

Спробуйте це в CSS розділу:

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

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

Після прийнятої відповіді, якщо ви не хочете налаштувати розмітку, для роз'єднання проблем або просто тому, що ви використовуєте 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, щоб видалити пробіл.

Я віддаю перевагу цьому методу згідно з вертикальним центром CSS Девіда Уолша :

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

transformЧи не є суттєвим; він просто знаходить центр трохи точніше. Internet Explorer 8 може бути трохи меншим центром у результаті, але це все-таки непогано - Чи можу я використовувати - Перетворює 2d .

Це моє рішення. Просто додайте цей клас до вмісту 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>

Я щойно це зробив, і він робить те, що хочу.

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

Посилання завантаження

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

Я зіткнувся з цим самим питанням. У моєму випадку я не знав висоти зовнішнього контейнера, але ось як це я зафіксував:

Спочатку встановіть висоту для своїх елементів 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

Немає потреби в осередках таблиці та стільниць. Це можна легко досягти, використовуючи перетворення.

Приклад: 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>

Якщо ви використовуєте Менше версії 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>

Я детально розробив відповідь 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>

Flex поведінка підтримується в основному з Bootstrap 4. Додайте d-flex align-items-centerв розділ 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>

Джерело: Flex · Bootstrap

Гаразд, випадково я змішав декілька рішень, і це, нарешті, працює для мого макета, де я спробував скласти таблицю 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>

Спробуйте це,

.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. Використовуйте 

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

   і CSS контейнера до

   display: table;

2. Використовуйте прокладки разом із медіа-екраном для зміни обшивки відносно розміру екрана. Екран Google @media, щоб дізнатися більше.

3. Використовуйте відносну підкладку

   Тобто, вкажіть прокладку у%

За допомогою Bootstrap 4 (який зараз є альфа) ви можете використовувати .align-items-centerклас. Таким чином, ви можете зберегти чуйний характер 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 col-xx-xx застосовує стиль до div як float: left.

Мені довелося застосувати стиль до елементів div, як style = "Float: none", і всі мої елементи div почали вертикально вирівнюватися. Ось робочий приклад:

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

JsFiddle Link

Про всяк випадок, якщо хтось хоче прочитати більше про властивість float:

W3Schools - Float