引導4 - Flex垂直對齊

我使用引導4柔性框來創建垂直對齊，但是我仍然有舊時問題，其中我的行和列不擴展爲容器的整個高度。因此，我的垂直對齊彈性框代碼不起作用，因爲容器只與內容一樣高。引導4 - Flex垂直對齊

由於英雄課堂設置爲70vh，我希望內容在該容器內垂直對齊。所以H2，P，& a標籤垂直使用新的引導柔性的網格佈局

我一定要設定一個最小高度，以解決此問題是英雄包裝中的中心？

.hero { 
 
    background: red; 
 
    width: 100%; 
 
    height: 70vh; 
 
}

<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css"/> 
 

 
<div class="hero"> 
 
    <div class="container"> 
 
    <div class="row flex-items-xs-middle"> 
 
     <div class="col-xs"> 
 
     <h2>a real tag line here</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p> 
 
     <a class="tek-btn" href="#">Order now!</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

例小提琴 - https://jsfiddle.net/7qynca6z/

來源

2016-12-26 Sam

「的問題在我的行和列不擴大是容器的整個高度」 - 多少高度，你需要的div容器取？ –

英雄的全高爲70vh，所以我希望內容在該容器內垂直對齊。對不起，我會更新的問題更清楚 – Sam

只是要hero一個Flexbox的，並給它align-items: center。

查看演示下面和Updated fiddle here：

.hero { 
 
    background: red; 
 
    width: 100%; 
 
    height: 70vh; 
 
    display: flex; 
 
    align-items: center; 
 
}

<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css"/> 
 

 
<div class="hero"> 
 
    <div class="container"> 
 
    <div class="row flex-items-xs-middle"> 
 
     <div class="col-xs"> 
 
     <h2>a real tag line here</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p> 
 
     <a class="tek-btn" href="#">Order now!</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-12-26 17:17:40 kukkuz

啊哈！非常好，謝謝 – Sam

下面是使用最新的引導4（阿爾法6）更新溶液。
不需要額外的CSS。

https://www.codeply.com/go/hFtD71FMc4

<div class="hero"> 
    <div class="container d-flex align-items-center h-100"> 
    <div class="row"> 
     <div class="col-xs"> 
     <h2>a real tag line here</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p> 
      <a class="tek-btn" href="#">Order now!</a> 
     </div> 
    </div> 
    </div> 
</div>

來源

2017-05-18 13:41:49 ZimSystem

引導4 - Flex垂直對齊

回答

相關問題