引導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; 
} 

所以，基本上我需要垂直居中我行，因此容器的內容會垂直對齊。我想用flexbox風格來做到這一點。在我看來，像許多設計模板的常見任務，但我找不到合適的解決方案。也許我正在解決這個任務錯了？

我的解決方案：

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父母的子女是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>