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

Question

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

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

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

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

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

WORKING EXAMPLE

Answer 2

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

Объяснение:

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

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

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

Answer 3

Могли бы вы не просто добавил:

align-items:center; 

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

<div class="row align_center"> 

.align_center { align-items:center; }