부트 스트랩 4 - 플렉스 수직 정렬

부트 스트랩 4 플렉스 박스를 사용하여 수직 정렬을 만들었지 만 내 행과 열이 컨테이너의 전체 높이가되도록 확장하지 않는 오래된 문제가 여전히 있습니다. 따라서 컨테이너가 내용물만큼 높기 때문에 내 세로 정렬 플렉스 상자 코드가 작동하지 않습니다.부트 스트랩 4 - 플렉스 수직 정렬

영웅 클래스가 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>

출처

2016-12-26 Sam

"내 행과 열이 컨테이너의 전체 높이로 확장되지 않는 문제"- 얼마나 높이 당신이 취할 컨테이너 DIV 필요합니까? –

주인공의 전체 높이가 70vh이므로 콘텐츠를 해당 컨테이너 내에서 세로로 정렬하고 싶습니다. 죄송합니다 질문을 더 명확하게 업데이트하겠습니다. – Sam

https://jsfiddle.net/7qynca6z/ 그냥 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 - 플렉스 수직 정렬

답변

관련 문제