부트 스트랩 4 수직 정렬 센터가 플렉스 레이아웃에서 작동하지 않습니다.

부트 스트랩 4를 사용하여 3 개의 컬럼으로 구성된 반응 형 레이아웃을 사용하여 다른 화면 크기에서 순서, 너비 및 수평 정렬을 변경해야합니다. 스크린 크기가 imgs의 수평 가운데 정렬 < 768px가 작동하지 않는 것을 제외하고는 모두 잘 작동합니다. 내 예제 코드에서부트 스트랩 4 수직 정렬 센터가 플렉스 레이아웃에서 작동하지 않습니다.

.icon-xl-large { 
 
    width: 80px; 
 
} 
 

 
.w-400px { 
 
    max-width: 400px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row justify-content-center justify-content-md-between"> 
 
    <div class="order-md-1 col-6 col-md-auto align-self-center"> 
 
    <img src="http://via.placeholder.com/350x350" alt="" class="icon-xl-large mx-auto" > 
 
    </div> 
 
    <div class="order-md-3 col-6 col-md-auto align-self-center"> 
 
    <img src="http://via.placeholder.com/350x350" alt="" class="icon-xl-large mx-auto" > 
 
    </div> 
 
    <div class="col-12 order-md-2 col-md-6 w-400px text-center"> 
 
    <h5>Sample text in center</h5> 
 
    </div> 
 
</div>

2 열에서 imgs 왼쪽 정렬 모두 : 여기에 내 코드입니다. 예상되는 동작은 두 img가 각각의 열에 수직 중심을 정렬하는 것입니다. 스크린 크기> 768px에서는 img의 열이 자동으로 왼쪽 및 오른쪽으로 이동합니다 (col-md-auto). 이는 예상되어 변경하면 안됩니다.

화면 크기에서 img를 가운데에 맞출 수있는 방법 < 768px?

Vertical Align Center in Bootstrap 4과 같은 유사한 질문을 발견하고 다양한 제안 된 해결책을 시도했습니다. mx-auto 설정, d- 굴곡이있는 컨텐트 센터 정당화, 고정 폭 설정 등. 아무 것도 작동하지 않습니다. 내가 뭘 놓치고 있니?

출처

2017-12-02 tealowpillow

이미지가 포함 된 div를 지정할 수 있습니다 : text-align : center. 예를 들어 : .mx-auto를 들어

@media (max-width: 768px) { 
    .col-6.col-md-auto.align-self-center { 
     text-align:center; 
    } 
}

출처

2017-12-02 19:07:29

작동하려면, 당신은 .d-block이 필요합니다. Aligning images.

<img src="http://via.placeholder.com/350x350" alt="" class="icon-xl-large mx-auto d-block">

출처

2017-12-02 19:09:23

부트 스트랩 4 수직 정렬 센터가 플렉스 레이아웃에서 작동하지 않습니다.

답변

관련 문제