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

Bootstrap 열 내 콘텐츠 중앙 정렬

Bootstrap에서는 다양한 방법을 통해 콘텐츠를 열 내 중앙 정렬할 수 있습니다.

하나 일반적인 접근 방식은 div 열 내에서 align="center" 속성을 사용하는 것입니다. 예:

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

그러나 이 방법은 HTML5에서 완전히 지원되지 않습니다. 대신 Bootstrap 3은 열에 적용할 수 있는 전용 텍스트 센터 클래스를 제공합니다.

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

Bootstrap 4의 경우 flex 클래스는 콘텐츠 중앙 정렬을 위한 보다 현대적이고 효율적인 솔루션을 제공합니다.

<code class="html"><div class="d-flex justify-content-center">
  <div>some content</div>
</div></code>

flex-direction 속성이 열을 y축을 따라 가운데로 설정하지 않는 한 이 방법은 기본적으로 콘텐츠를 x축을 따라 중앙에 배치합니다.

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