
HTML 표 내용 가운데 정렬
HTML 표로 작업할 때 셀 내용을 수직 및 수평으로 정렬해야 할 수도 있습니다. 시각적으로 더 매력적인 결과를 얻을 수 있습니다. 이를 달성하는 방법은 다음과 같습니다.
텍스트를 가로 및 세로로 중앙에 배치
-
인라인 스타일 속성: 텍스트 정렬 속성을 사용하여 가운데 정렬 텍스트를 가로로 정렬하고 수직으로 정렬하려면 수직 정렬을 사용합니다. 예:
1 | <code class = "html" ><td style= "text-align: center; vertical-align: middle;" >Text</td></code>
|
로그인 후 복사
-
CSS 규칙: 모든 표 셀의 텍스트를 중앙에 배치하는 CSS 규칙을 정의합니다.
1 2 3 4 | <code class = "css" >td {
text-align: center;
vertical-align: middle;
}</code>
|
로그인 후 복사
다음은 두 가지 접근 방식을 모두 보여주는 예입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <code class = "html" ><table>
<tr>
<td style= "text-align: center; vertical-align: middle;" >Centered Cell</td>
<td style= "text-align: center; vertical-align: middle;" >Centered Cell</td>
</tr>
</table>
<table border= "1" id= "cssTable" >
<tr>
<td>Centered Cell</td>
<td>Centered Cell</td>
</tr>
</table></code>
|
로그인 후 복사
1 2 3 4 | <code class = "css" >#cssTable td {
text-align: center;
vertical-align: middle;
}</code>
|
로그인 후 복사
이러한 기술을 사용하면 HTML 테이블의 내용을 쉽게 중앙에 배치하여 더욱 사용자 친화적이고 시각적으로 매력적인 인터페이스를 만들 수 있습니다.
위 내용은 HTML 테이블 내용을 가운데 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!