フレックスボックス内のブートストラップ4のテキストセンターが機能しない

Question

私は自分のウェブページを2つの垂直な列に分割しようとしています。これをクリックすると、正しいページに移動できます。私はこれまでこれを得た。

HTML

<!-- Choices --> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6 col-xs-12 vertical-center webd"> 
      <h1 class="text-muted text-center">Web Design</h1> 
     </div> 
     <div class="col-md-6 col-xs-12 vertical-center circ"> 
      <h1 class="text-muted text-center">Circus</h1> 
     </div> 
    </div> 
</div> 

CSS

.vertical-center { 
    min-height: 100%; 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
} 

.webd { 
    background-image: url('webd.jpg'); 
} 

.circ { 
    background-image: url(circ.JPG); 
} 

私の問題は、私はtext-centerクラスを入れていない問題です。私の<h1>は、ページ上で左揃えのままです。誰でも助けることができますか？

Answer 1

これは、ディスプレイフレックスを親コンテナに追加したためです。これは、子供たちがもはや全幅ではないことを意味します。

あなたは次のスタイルを追加した場合、それはあなたのエラーを修正します：

.vertical-center > .text-center 
{ 
    flex-grow: 1; 
} 

Example bootply

あなたが子供を育てるにしたくない場合、あなたは自分の垂直方向の中央に以下を追加することができます：justify-content: center;

Example bootply 2