Flexbox를 사용하여 부트 스트랩 중심

Bootstrap에서 Flexbox를 사용하여 요소 센터링을 구현하십시오 : 수평 센터링 : "정당한 콘텐츠 : 센터"를 사용하십시오. 부모 요소의 속성. 수직 센터링 : "정렬 항목 : 센터;"를 사용하십시오. 및 "높이 : 100VH;" 부모 요소의 속성. 기타 옵션 : 단일 요소의 "정렬"속성을 설정하거나 "마진 : 자동"을 사용할 수 있습니다. 자동으로 요소를 자동으로 정렬합니다.

Flexbox를 사용하여 부트 스트랩 중심

Bootstrap에서 Flexbox는 수평 또는 수직으로 요소를 중앙으로하는 다양한 옵션을 제공합니다. Flexbox 센터링 요소를 사용하는 것은 간단하고 유연합니다.

수평으로 중앙

요소를 가로로 중앙으로 중앙에 있으려면 다음 속성을 부모 요소에 추가하십시오.

 <code class="css">justify-content: center;</code>

이 속성은 부모 요소 내에서 자식 요소를 수평으로 배열합니다.

수직 중심

요소를 수직으로 중앙으로 중앙에 있으려면 다음 두 가지 속성을 결합 할 수 있습니다.

1. align-items: center; :이 속성은 부모 요소 내에서 어린이를 세로로 정렬합니다.
2. height: 100vh; :이 속성은 부모 요소의 높이를 창 높이로 설정하여 요소가 수직 방향으로 중앙에 있는지 확인합니다.

다른 옵션

이러한 기본 옵션 외에도 Flexbox는 중심을 제어하기위한 추가 옵션을 제공합니다.

• 정렬 : 이 속성을 사용하면 단일 자식 요소에 대한 정렬을 설정하여 상위 요소의 설정을 재정의합니다.
• 마진 : 자동 : 이 속성은 부모 요소의 가장자리에서 요소를 자동으로 정렬 할 수 있습니다.

예

다음은 Flexbox를 사용하여 부트 스트랩에서 수평 및 수직으로 텍스트를 중앙으로 중앙으로하는 예입니다.

 <code class="html"><div class="d-flex justify-content-center align-items-center" style="height: 100vh;"> <p>居中文本</p> </div></code>

이러한 특성을 사용하면 부트 스트랩에서 요소의 수평 및 수직 중심을 쉽게 구현할 수 있습니다.

위 내용은 Flexbox를 사용하여 부트 스트랩 중심의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!