Bootstrap 4에서 수직 정렬을 달성하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Bootstrap 4에서 수직 정렬을 달성하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-23 04:14:19

원래의

1059명이 탐색했습니다.

How to Achieve Vertical Alignment in Bootstrap 4?

Bootstrap 4의 수직 정렬

Bootstrap 4의 텍스트 요소와 같은 요소를 정렬하는 것은 어려울 수 있습니다. 일반적으로 text-align 유틸리티는 가로 정렬에만 사용할 수 있으며 대부분의 세로 정렬 기술은 일반적으로 추가 마크업을 추가하고 기본 스타일을 재정의하여 구현됩니다.

flex-xs-middle 클래스

Bootstrap의 이전 버전(예: Bootstrap 3 및 Bootstrap 4의 이전 버전)은 flex-xs-middle 클래스를 사용하여 수직으로 중심 요소 . 이 클래스를 컨테이너에 추가하여 Flexbox를 사용하여 내용을 세로로 가운데에 배치할 수 있습니다.

<div class="container-fluid">
    <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>
    <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>
</div>

로그인 후 복사

Bootstrap 4.0.0 업데이트

Bootstrap 4.0.0부터 Flexbox 기본 설정이 됩니다. 따라서 이제 여러 가지 방법을 사용하여 요소를 세로로 정렬할 수 있습니다.

auto-margins

my-auto 유틸리티를 사용하면 자동으로 요소를 세로로 가운데에 배치할 수 있습니다. 예:

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

로그인 후 복사

flexbox

flexbox align-self-center와 같은 유틸리티를 사용하여 단일 열 또는 전체 행의 모든 열을 정렬할 수 있습니다. 예:

<div class="row">
    <div class="col-6 align-self-center">
        <div class="card card-block">Center</div>
    </div>
    <div class="col-6">
        <div class="card card-inverse card-danger">Taller</div>
    </div>
</div>

로그인 후 복사

디스플레이 유틸리티

Bootstrap 4에는 수직 정렬 대신 사용할 수 있는 디스플레이 유틸리티 세트도 함께 제공됩니다. 예:

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

로그인 후 복사

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