부트 스트랩 4/5를 사용하여 요소 센터링을 달성합니다

부트 스트랩 4/5에서 수평 센터링 요소는 텍스트 중심 클래스 또는 MX-AUTO 클래스를 사용할 수 있으며, 수직 센터링 요소는 D-Flex 및 정렬 중심 클래스 또는 마진을 사용할 수 있습니다 : 자동; 부트 스트랩 5의 스타일 및 D- 그리드 및 정렬 컨텐츠 중심 클래스 또는 위치 : 절대; 그리고 상단 : 50%; 왼쪽 : 50%; 스타일.

부트 스트랩을 사용하여 요소 센터링 구현 4/5

Bootstrap 4/5에서 다음 방법을 사용하여 요소를 중심으로합니다.

수평으로 중앙

• text-center 클래스를 사용하십시오 : <div class="text-center">...</div>
• mx-auto 클래스 (bootstrap 5) : <div class="mx-auto">...</div>

수직 중심

부트 스트랩 4 :

• d-flex 및 align-items-center 클래스를 사용하십시오 : <div class="d-flex align-items-center">...</div>

부트 스트랩 5 :

• d-grid 및 align-content-center 클래스를 사용하십시오 : <div class="d-grid align-content-center">...</div>

수직 중심을 사용하는 다른 방법

• margin: auto; 스타일 : <div style="margin: auto;">...</div>
• 사용 position: absolute; 그리고 top: 50%; left: 50%; 스타일 : <div style="position: absolute; top: 50%; left: 50%;">...</div>

예:

수평 중심 :

 <code class="html"><div class="text-center"> <h1 id="标题">标题</h1> </div></code>

 <code class="html"><div class="mx-auto"> <button class="btn btn-primary">按钮</button> </div></code>

수직 센터링 :

부트 스트랩 4 :

 <code class="html"><div class="d-flex align-items-center"> <h1 id="标题">标题</h1> </div></code>

부트 스트랩 5 :

 <code class="html"><div class="d-grid align-content-center"> <button class="btn btn-primary">按钮</button> </div></code>

위 내용은 부트 스트랩 4/5를 사용하여 요소 센터링을 달성합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!