부트 스트랩 테이블 컨텐츠 중심 : 데이터를 더 명확하게 만듭니다

부트 스트랩 테이블 컨텐츠 센터링 팁 : 텍스트 중심 클래스를 사용하여 수평 센터링을 달성합니다 (테이블 중심 클래스 이름은 TH 및 TD 요소에 적용됩니다). D-Flex 및 Align-Items-Center 클래스를 사용하여 컨텐츠를 수직으로 정렬하고 DIV 높이를 행 높이 (고정 행 높이를 가진 테이블의 경우)로 설정하십시오.

부트 스트랩 테이블 컨텐츠 중앙 : 테이블의 가독성 향상

부트 스트랩 테이블에서 컨텐츠를 센터링하는 것은 테이블의 가독성과 미학을 향상시키는 효과적인 방법입니다. CSS 스타일을 사용하면 수평 또는 수직으로 테이블 컨텐츠를 쉽게 중심으로 할 수 있습니다.

수평으로 중앙

테이블 컨텐츠를 가로로 중앙으로 중앙에하려면 text-center 클래스를 사용하십시오.

 <code class="css">.table-centered { text-align: center; }</code>

그런 다음 <th> 및 <code><td> 요소에 적용하십시오.<pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;table class=&quot;table-centered&quot;&gt; &lt;tr&gt; &lt;th&gt;头1&lt;/th&gt; &lt;th&gt;头2&lt;/th&gt; ... &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;数据1&lt;/td&gt; &lt;td&gt;数据2&lt;/td&gt; ... &lt;/tr&gt; &lt;/table&gt;&lt;/code&gt;</pre> <p> <strong>수직 중심</strong></p> <p> 수직 센터링 테이블 내용에는 더 많은 단계가 필요합니다.</p> <ul><li> 추가 <code><div> 요소를 만들고 <code><th> 또는 <code><td> 로 래핑하십시오.<li> <code>d-flex 및 align-items-center 클래스를이 <div> 요소에 적용하여 내용을 수직으로 일치시킵니다.<li> 행 높이와 일치하도록 <code><div> 의 높이를 설정하십시오.<p> 예를 들어:</p> <pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;table&gt; &lt;tr&gt; &lt;th&gt; &lt;div class=&quot;d-flex align-items-center&quot; style=&quot;height: 50px;&quot;&gt;头1 &lt;/div&gt; &lt;/th&gt; ... &lt;/tr&gt; ... &lt;/table&gt;&lt;/code&gt;</pre> <p> 높이를 사용자 정의하려면 <code>style="height: 50px;" 의 값을 조정하십시오. " .

알아채다:

• 수직 센터링은 고정 행 높이가있는 테이블에만 적합합니다.
• 테이블 컨텐츠에 요소 (예 : 버튼 또는 이미지)가 포함 된 경우 적절한 CSS 규칙을 사용하여 수평 또는 수직으로 중심으로 중심하십시오.