「col-sm-12」内のテキストをブートストラップ4で縦方向にセンタリングするにはどうすればよいですか？

Question

私は、テキストを黄色のスペース全体の中に垂直にセンタリングしようとしています。私は、 "my-auto"クラスだけでなく、ドキュメントにも書かれているように、 "align-items-center"を行に実装しようとしていました。私は何が間違っているのか分かりません。

#heading-cont { 
 
    background-color: #F7CE38; 
 
    height: 10rem; 
 
} 
 

 
.white { 
 
    color: white; 
 
} 
 

 
.title { 
 
    font-family: 'Montserrat', Arial, sans-serif; 
 
    text-transform: uppercase; 
 
    font-weight: 300; 
 
} 
 

 
.description { 
 
    font-family: 'Pathway Gothic One', Arial, sans-serif; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="header"> 
 
    <div class="container-fluid" id="heading-cont"> 
 
    <div class="row"> 
 
     <div class="col-sm-12 my-auto"> 
 
     <h1 class="title white text-center">Digital</h1> 
 
     <h4 class="description white text-center">This is the description.</h4> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

CodePen Demo

Answer 1

（私はあなたが "縦にセンター" 意味と仮定し; 1つの列のみがあなたの例でありますから、とそれをを揃えることは何もありません）

container-fluidには、Bootstrapに最低10remの高さが割り当てられています。縦にテキストを中央に、あなたはそれを一致させるためにrowをストレッチする必要があります。

#heading-cont > .row { 
    height: 100%; 
} 

Answer 2

あなたは内のテキストを中央揃えにする余地があるように、行に100％の高さを与える必要があります

.row { 
    height: 100%; 
} 

Answer 3

あなたは#heading-contに（私の例.xで）クラスを追加し、それフレキシボックスのコンテナにし、垂直方向にその内容を中心に、それに次のCSSを適用することができます。

.x { 
    display:flex; 
    flex-direction: column; 
    justify-content: center; 
} 

https://codepen.io/anon/pen/GMdazJ

Answer 4

まず、それらが使用されることを意味していた4クラスと同様に、ブートストラップを使用します。 クラス=「D-フレックスフレックス列コンテンツ・センターを正当化」し、その後、あなたはに高さを追加する必要はありません行あなたがする必要がない場合は、既存のユーティリティクラスを繰り返すだけの、別々のCSSルールを作成しないでください。

/*containers*/ 
 

 
.container-fluid { 
 
    padding: 0; 
 
} 
 

 
#heading-cont { 
 
    background-color: #F7CE38; 
 
    height: 10rem; 
 
} 
 

 
#subheading { 
 
    height: 8rem 
 
} 
 

 
#heading-cont > .row { 
 
/* height: 10rem;*/ 
 
} 
 

 
#subheading > .row { 
 
    /*height: 100%;*/ 
 
} 
 

 
/*type + color*/ 
 

 
h1 { 
 
    font-size: 3rem !important; 
 
} 
 

 
h3 { 
 
    font-size: 2rem !important; 
 
} 
 

 
.white { 
 
    color: white; 
 
} 
 

 
.margin-b { 
 
    margin-bottom: 2rem; 
 
} 
 

 

 
.title { 
 
    font-family: 'Montserrat', Arial, sans-serif; 
 
    text-transform: uppercase; 
 
    font-weight: 300; 
 
} 
 

 
.description { 
 
    font-family: 'Pathway Gothic One', Arial, sans-serif; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
} 
 

 
/*social-prof*/ 
 

 
.box { 
 
    background-color: #E0E0E0; 
 
    height: 20rem; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="header"> 
 
    <div class="container-fluid d-flex flex-column justify-content-center" id="heading-cont"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <h1 class="title white text-center">Digital</h1> 
 
     <h3 class="description white text-center">This is the description.</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 

 
<section class="social-prof"> 
 
    <div class="container-fluid d-flex flex-column justify-content-center" id="subheading"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <h1 class="title text-center">Branding</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container-fluid" id="bu"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="box"> 
 
      <div class="layer"> 
 
      <h3 class="description white text-center margin-b">Small Business Services</h3> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

https://codepen.io/anon/pen/oGyrPg