플렉스 박스의 부트 스트랩 4 텍스트 센터가 작동하지 않습니다.

Question

내 웹 페이지를 두 개의 세로 열로 나누려고합니다.이 열을 클릭하면 올바른 페이지로 이동할 수 있습니다. 나는 지금까지 이것을 얻었다.

HTML

<!-- Choices --> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6 col-xs-12 vertical-center webd"> 
      <h1 class="text-muted text-center">Web Design</h1> 
     </div> 
     <div class="col-md-6 col-xs-12 vertical-center circ"> 
      <h1 class="text-muted text-center">Circus</h1> 
     </div> 
    </div> 
</div> 

CSS

.vertical-center { 
    min-height: 100%; 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
} 

.webd { 
    background-image: url('webd.jpg'); 
} 

.circ { 
    background-image: url(circ.JPG); 
} 

내 문제는, 내가 text-center 클래스를 넣어 상관없이. 내 <h1> 님이 페이지 왼쪽에 정렬 상태를 유지합니다. 아무도 도와 줄 수 있니?

Answer 1

부모 컨테이너에 디스플레이 플렉스를 추가했기 때문입니다. 이것은 아이들이 더 이상 전폭이 아니라는 것을 의미합니다. 당신이 아이들을 성장하지 않으려면

.vertical-center > .text-center 
{ 
    flex-grow: 1; 
} 

Example bootply

, 당신은 당신의 수직 중심에 다음을 추가 할 수 있습니다 : 당신은 다음과 같은 스타일을 추가하는 경우

, 그것은 당신의 오류를 수정합니다 : justify-content: center;

Example bootply 2