ブートストラップ4センタリング列垂直列内の

Question

HTML：

<div class="container-fluid main-header"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col">asdfasdf</div> 
       <div class="col-11">asdasd</div> 
      </div> 
     </div> 
    </div> 

CSS：

@media (min-width: 1900px) { 
    .container { 
    width: 1720px; 
    } 
} 
.main-header { 
    background-color: white; 
    height: 150px; 
} 
.container-fluid .container { 
    padding-left:0; 
    padding-right:0; 
} 

だから、基本的に私は縦に私の行を中央に必要なので、コンテナの内容は、希望垂直に整列させる。私はフレックスボックススタイルでこれをやりたいデザインテンプレートの多くは一般的な仕事のようですが、適切な解決策を見つけることができません。たぶん私は間違ってこのタスクを解決していますか？

私の解決策：

HTML：

<div class="container-fluid main-header"> 
     <div class="container"> 
      <div class="row header-row align-items-center"> 
       <div class="col-2">asdfasdf</div> 
       <div class="col-10">asdasd</div> 
      </div> 
     </div> 
    </div> 

CSS：

.main-header { 
    background-color: white; 
} 

@media (min-width: 1900px) { 
    .container { 
    width: 1720px; 
    } 
} 
.container-fluid .container { 
    padding-left:0; 
    padding-right:0; 
} 
.header-row { 
    height: 150px; 
} 

Answer 1

.rowの高さを指定しないと、高さが自動的にその子の最大値に調整されます。もちろん、その親がdisplay:flex;である場合を除き、.rowと.rowより大きい指定または結果の高さはflex-grow: 1です。この場合、.rowは親に一致するようになります。

flex-direction:rowの子を垂直方向に並べるために必要なもう1つの作業は、align-items:centerです。

.main-header .row { 
 
    min-height: 150px;  /* required (or height) - use hard units, not % */ 
 
    align-items: center; /* required */ 
 
    display: flex;   /* required */ 
 
    
 
    background-color: #eee; 
 
}

<div class="main-header"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col">asdfasdf</div> 
 
     <div class="col-11">asdasd</div> 
 
    </div> 
 
    </div> 
 
</div>