Bootstrap 4에서 콘텐츠를 수직 중앙에 배치하는 방법은 무엇입니까?

Bootstrap 4의 수직 정렬

문제 소개

Bootstrap 4에서는 특정 요소의 수직 정렬이 어려울 수 있습니다. 행 내에서 콘텐츠, 특히 "Supplier"라는 텍스트가 포함된 요소를 수직으로 가운데 정렬하려고 할 때 일반적인 어려움이 발생합니다.

솔루션 개요

Bootstrap 4에는 Flexbox 유틸리티를 포함하여 수직 정렬을 위한 여러 가지 방법이 도입되었습니다. , 자동 여백 및 디스플레이 유틸리티.

Flexbox 접근 방식

Bootstrap 4 Alpha 5 이하:

<div class="row">
    <div class="col-xs-6">
        <div class="circle-medium backgrounds"></div>
    </div>
    <div class="col-xs-6 flex-xs-middle">
        <div class="name">Supplier</div>
    </div>
</div>

Bootstrap 4 Stable:

<div class="row">
    <div class="col-sm-12 align-self-center">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

부트스트랩 4 Flexbox by 기본값:

<div class="row">
    <div class="col-sm-12 d-flex align-items-center justify-content-center">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

자동 여백 접근 방식

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

디스플레이 유틸리티 접근 방식

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            Supplier
        </div>
    </div>
</div>

결론

이러한 방법은 다양한 Bootstrap 4의 요소 수직 정렬 옵션. 특정 요구 사항에 가장 적합한 접근 방식을 선택해야 합니다. 및 브라우저 호환성 고려 사항.

위 내용은 Bootstrap 4에서 콘텐츠를 수직 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!