>  기사  >  웹 프론트엔드  >  Bootstrap CSS 클래스를 사용하여 표 내부의 텍스트를 어떻게 정렬할 수 있습니까?

Bootstrap CSS 클래스를 사용하여 표 내부의 텍스트를 어떻게 정렬할 수 있습니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-02 03:01:02763검색

How Can I Align Text Inside a Table Using Bootstrap CSS Classes?

CSS 클래스를 사용하여 표 내부의 텍스트를 정렬하는 방법

Twitter의 Bootstrap 프레임워크는 HTML 요소 내에서 텍스트를 정렬하기 위한 강력한 CSS 클래스 세트를 제공합니다. . 이러한 클래스를 표 요소에 적용하여 원하는 정렬을 얻을 수 있습니다.

Bootstrap 3

Bootstrap 3의 경우 다음 클래스를 사용하여 표 셀 내의 텍스트를 정렬할 수 있습니다. :

  • .text-left: 왼쪽 정렬
  • .text-center: 가운데 정렬
  • .text-right: 오른쪽 정렬

예:

<code class="html"><th class="text-right">Total</th>
<td class="text-right">,000,000.00</td></code>

Bootstrap 4

Bootstrap 4는 텍스트 정렬에 대한 보다 세부적인 제어 기능을 도입하여 다양한 뷰포트 크기에 대해 다양한 정렬을 지정할 수 있습니다. 다음 클래스를 사용할 수 있습니다.

  • .text-xs-left: 모든 뷰포트 크기에서 왼쪽 정렬된 텍스트
  • .text-xs-center: 모든 뷰포트에서 가운데 ​​정렬된 텍스트 크기
  • .text-xs-right: 모든 뷰포트 크기에서 오른쪽 정렬된 텍스트
  • .text-sm-left: SM(소형) 이상 크기의 뷰포트에서 왼쪽 정렬된 텍스트
  • .text-md-left: MD(중형) 이상 크기의 뷰포트에서 왼쪽 정렬 텍스트
  • .text-lg-left: LG(대형) 이상 크기의 뷰포트에서 왼쪽 정렬 텍스트
  • .text-xl-left: XL(특대형) 이상의 뷰포트에서 왼쪽 정렬 텍스트

Bootstrap 5

부트스트랩 5에서는 .text-left가 .text-start로 대체되었고, .text-right가 .text-end로 대체되었습니다. 그렇지 않으면 정렬 옵션은 동일하게 유지됩니다.

위 내용은 Bootstrap CSS 클래스를 사용하여 표 내부의 텍스트를 어떻게 정렬할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.