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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!