Bootstrap 열에서 콘텐츠를 중앙에 배치하는 방법은 무엇입니까?

Bootstrap 열에서 콘텐츠를 중앙에 배치하는 데

Bootstrap 열에서 콘텐츠를 중앙에 배치하는 데 어려움을 겪고 있습니다. 제공된 HTML에는 다음이 포함됩니다.

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

해결책:

문제는 "center-block" 클래스 사용에 있습니다. 이 클래스는 현재 버전의 Bootstrap에서 더 이상 지원되지 않습니다. 대신 다음 방법 중 하나를 사용해야 합니다.

Bootstrap 3 이전:

"align" 속성 사용:

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

Bootstrap 3 및 4:

"text-center" 클래스 사용:

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

Bootstrap 4:

사용 플렉스 클래스:

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

참고: Bootstrap 4는 기본적으로 콘텐츠를 가로로 정렬합니다. 수직 정렬의 경우 상위 요소에 "flex-direction:column"을 사용하세요.

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