부트스트랩 열에서 콘텐츠를 적절하게 중앙에 배치하는 방법은 무엇입니까?

Bootstrap 열의 콘텐츠 정렬

Bootstrap 열로 작업할 때 열 안의 콘텐츠를 정렬하는 것이 때때로 어려울 수 있습니다. 일반적인 요구 사항 중 하나는 콘텐츠를 가로와 세로 모두 중앙에 배치하는 것입니다. 이 문서에서는 Bootstrap 클래스를 사용하여 이를 달성하는 방법을 설명합니다.

다음 HTML에서 "center-block" 클래스를 사용하여 열의 내용을 중앙에 맞추려는 시도는 작동하지 않는 것 같습니다.

<code class="html"><div class="row">
   <div class="col-xs-1 center-block">
       <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
</div></code>

이 문제를 해결하려면 "center-block" 클래스 대신 "align" 속성을 사용하세요.

<code class="html"><!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center"></code>

또한 Bootstrap 3은 "text-center" 클래스를 제공하고 Bootstrap 4는 보다 간결하고 현대적인 정렬을 위한 "d-flex justify-content-center" 클래스.

<code class="html"><!-- recommended method -->
<div class="col-xs-1 text-center">

<!-- Bootstrap 4 -->
<div class="d-flex justify-content-center">
   <div>some content</div>
</div></code>

Bootstrap 4의 플렉스 클래스는 "flex-direction"이 아닌 한 기본적으로 콘텐츠를 x축을 따라 중앙에 배치합니다. "가 "열"로 설정되어 있습니다.

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