HTML 테이블에서 텍스트를 가로 및 세로 가운데에 배치하려면 어떻게 해야 합니까?

HTML 테이블의 텍스트를 수평 및 수직으로 정렬

HTML 테이블에서 각 셀 내의 텍스트를 수평 및 수직으로 중앙에 배치합니다. 데이터의 표현과 가독성을 향상시킬 수 있습니다. 이를 달성하기 위한 자세한 지침은 다음과 같습니다.

수평 정렬

텍스트를 수평으로 가운데에 맞추려면 text-align CSS 속성을 사용하세요. 텍스트 정렬 추가: 센터; 강요. 그러면 각 셀의 중앙에 텍스트가 정렬됩니다.

세로 정렬

세로 정렬에는 CSS의 Vertical-align 속성을 적용하세요. 수직 정렬 설정: 중간; 텍스트가 셀 내에서 세로 중앙에 위치하도록 합니다. 이 속성은 셀 높이에 따라 조정해야 할 수도 있습니다.

인라인 스타일 지정의 예

테이블 내에서 인라인 스타일을 사용하여 다음 정렬을 적용할 수 있습니다.

<code class="html"><table border="1">
  <tr>
    <td style="text-align: center; vertical-align: middle;">Text</td>
    <td style="text-align: center; vertical-align: middle;">Text</td>
  </tr>
</table></code>

CSS를 사용한 예 클래스

또는 CSS 클래스를 생성하여 정렬을 적용할 수 있습니다.

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

그리고 이를 테이블에서 사용할 수 있습니다.

<code class="html"><table border="1">
  <tr>
    <td class="center-text">Text</td>
    <td class="center-text">Text</td>
  </tr>
</table></code>

기억하세요. 셀의 지정된 높이와 너비는 수직 정렬에 영향을 줄 수 있습니다. 원하는 결과를 얻으려면 필요에 따라 값을 조정하세요.

위 내용은 HTML 테이블에서 텍스트를 가로 및 세로 가운데에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!