縦書きと横向きのテキストを列の中央に配置する方法は？

Question

縦と横の両方の列の中にテキストを配置する方法は？私はあなたが必要なものをこのブートストラップ4.

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

 
<div class="row"> 
 

 
    <div class="col"> 
 
    <h1> 
 
     <p> hello hello hello hello hello hello hello hello hello hello hello hello 
 
     </p> 
 

 
    </h1> 
 

 
    </div> 
 
    <div class="col"> 
 
    <p> hello hello hello hello hello hello hello hello hello hello hello hello 
 
    </p> 
 
    </div> 
 
</div>

Answer 1

を使用していますか？行の高さを持つことはよりよく視覚化されます。

.col { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
 
<div class="row"> 
 
    <div class="col"> 
 
    <h1> 
 
     <p> hello hello hello hello hello hello hello hello hello hello hello hello 
 
     </p> 
 
    </h1> 
 
    </div> 
 
    <div class="col"> 
 
    <p> hello hello hello hello hello hello hello hello hello hello hello hello 
 
    </p> 
 
    </div> 
 
</div>

Answer 2

あなたは、専用のクラスを経由してフレキシボックスのプロパティを使用することができます。変更するフレキシボックスコンテナに

https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

揃え項目

使用揃える-項目のユーティリティフレックスアイテムの配置十字軸（開始するy軸、屈曲方向の場合はx軸：列）。開始、終了、中央、ベースライン、またはストレッチ（ブラウザのデフォルト）から選択します。

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

 
<div class="row"> 
 

 
    <div class="col d-flex align-items-center "> 
 
    <h1> 
 
     <p> hello hello hello hello hello hello hello hello hello hello hello hello 
 
     </p> 
 

 
    </h1> 
 

 
    </div> 
 
    <div class="col d-flex align-items-center"> 
 
    <p> hello hello hello hello hello hello hello hello hello hello hello hello 
 
    </p> 
 
    </div> 
 
</div>

Answer 3

使用 "表示：フレックス" プロパティおよびこれらを適用...

が水平に正当化し、コンテンツ内容を揃える：センター;

コンテンツを垂直方向に整列するには：items：center;

.col { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}