Как вертикально центрировать текст в столбце (бутстрап 4)?

Question

Как вертикально центрировать текст в столбце (бутстрап 4)? Структура является базовой, см.:

<div class="row"> 
    <div class="col-md-6"> 
     <span>Text to center</span> 
    </div 
</div> 

Ty ребята!

Answer 1

Для этого можно добавить класс my-auto родительскому <div class="col-md-6">. Этот класс устанавливает автоматические поля по оси y, см. Ссылку выше для получения более подробной информации.

Это будет выглядеть следующим образом:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6 my-auto"> 
 
     <span>Text to center</span> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <h1>Hello</h1> 
 
     <h1>Hello</h1> 
 
     <h1>Hello</h1> 
 
    </div> 
 
    </div> 
 
</div>

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

Answer 2

Другой вариант заключается в использовании Flexbox утилиты ..

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 align-self-center"> 
      <span>Text to center</span> 
     </div> 
     <div class="col-md-6"> 
      <p> 
      .. 
      </p> 
     </div> 
    </div> 
</div> 

http://www.codeply.com/go/oy8H1bUOL1

Кроме того, есть several other Bootstrap vertical centering options объяснено в моей другой ответ.