列（ブーツストラップ4）にテキストを垂直に配置する方法は？

Question

列内のテキストを垂直方向にセンタリングする方法（ブートストラップ4）？構造は基本的です：

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

タイ人！

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

別のオプションは、

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

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

はまた、 several other Bootstrap vertical centering optionsは私の他の回答で説明があります。.. フレキシボックスユーティリティ使用することです。