Bootstrap 4에서 수직 정렬을 어떻게 달성할 수 있습니까?

Bootstrap 4의 수직 정렬

Bootstrap 4의 수직 정렬은 여러 가지 방법을 통해 달성할 수 있으며 각각 고유한 장점과 적용 시나리오가 있습니다.

자동 여백

자동 여백은 컨테이너 내에서 요소를 수직으로 중앙에 배치하는 데 사용할 수 있습니다. 이는 중앙에 배치하려는 요소에 my-auto 클래스를 추가하여 수행됩니다. 예:

<div>

Flexbox

Bootstrap 4는 기본적으로 Flexbox를 활용하여 수직 정렬을 위한 강력한 도구를 제공합니다. Flexbox를 사용하여 요소를 수직으로 중앙에 배치하려면 해당 요소에 align-self-center 클래스를 사용하십시오. 또는 상위 컨테이너에서 align-items-center를 사용하면 모든 플렉스 항목이 수직으로 중앙에 배치됩니다.

<div>

<div>

디스플레이 유틸리티

디스플레이 유틸리티를 사용하여 디스플레이 컨텍스트를 설정할 수 있습니다. 요소의 경우. 수직 정렬 유틸리티와 함께 ​​인라인 또는 테이블 셀 요소의 수직 정렬을 미세 조정할 수 있습니다. 예를 들면 다음과 같습니다.

<div>

이러한 기술을 이해하면 Bootstrap 4에서 요소를 수직으로 중앙에 효과적으로 배치하여 웹 페이지의 정렬과 시각적 매력을 향상시킬 수 있습니다.

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