Бутстрап, как получить текст в вертикальном выравнивании в контейнере div

Каков наилучший/правильный способ вертикального выравнивания текста в середине его столбца? Высота изображения статически задается в CSS.

Я попытался установить внешний div на display: table и внутренний div на display: table-cell с vertical-align: middle, но это тоже не сработало.

enter image description here

HTML

<section id="browse" class="browse">
    <div class="container">
        <div class="row">
            <div class="col-md-5 col-sm-5">
                <h2 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h2>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-6 col-sm-7 animation_container">
                <img id="animation_img2" class="animation_img animation_img2" src="images/section2img2.png"/>
                <img id="animation_img1" class="animation_img animation_img1" src="images/section2img1.png"/>
            </div>
        </div>
    </div>
</section>

CSS

.browse .container, .blind_dating .container { padding-bottom: 0; }
.animation_container { position: relative; }
.browse .animation_container { height: 430px; }
.animation_img { position: absolute; bottom: 0; }
.animation_img1 { right: 25%; }
.animation_img2 { right: 25%; }

Ответы

Ответ 1

HTML:

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

<div class="col-xs-5 textContainer">
     <h3 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h3>
</div>

CSS

Затем мы применим следующие стили, чтобы выровнять его по вертикали в соответствии с размером изображения div рядом с ним.

.textContainer { 
    height: 345px; 
    line-height: 340px;
}

.textContainer h3 {
    vertical-align: middle;
    display: inline-block;
}

Все сделано! Отрегулируйте высоту и высоту линии над стилями выше, если вы считаете, что она все еще слегка выровнена.

РАБОЧИЙ ПРИМЕР

Ответ 2

h2.text-left{
  position:relative;
  top:50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

Объяснение:

Стиль top: 50% по существу подталкивает элемент заголовка вниз на 50% от верхней части родительского элемента. Стили перевода также действуют аналогичным образом, перемещая затем элемент вниз на 50% сверху.

Обратите внимание, что это хорошо работает для заголовков с 1 (возможно, 2) строками текста, так как это просто перемещает верхний элемента заголовка на 50%, а затем остальная часть содержимого заполняется ниже это означает, что с несколькими строками текста он будет немного ниже вертикально выровнен.

Возможное исправление для нескольких строк будет состоять в том, чтобы использовать процент чуть менее 50%.

Ответ 3

Не могли бы вы просто добавить:

align-items:center;

для нового класса в вашей строке div. По существу:

<div class="row align_center">

.align_center { align-items:center; }