html 테이블 행에서 텍스트를 가운데에 맞추는 방법은 무엇입니까?

222

HTML을 사용하고 있으며 각 셀의 가운데에 <table>텍스트를 정렬하고 싶습니다 <td>.

텍스트를 가로와 세로로 가운데 정렬하려면 어떻게합니까?

html  css 
— 라 자고 팔
소스

답변:

323

다음은 CSS 및 인라인 style속성 이있는 예입니다 .

td 
{
    height: 50px; 
    width: 50px;
}

#cssTable td 
{
    text-align: center; 
    vertical-align: middle;
}
<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>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>
스 니펫 확장

http://jsfiddle.net/j2h3xo9k/

편집 :이 valign속성은 HTML5에서 더 이상 사용되지 않으므로 사용해서는 안됩니다.

— 데이비드 라 버지
소스
1
요소에 vertical-align:middle적용 되지 tr않습니까?
— posfan12
53

td요소의 텍스트를 중심으로하는 CSS 는

td {
  text-align: center;
  vertical-align: middle;
}
— 카 스텐
소스
29

이것을 CSS 파일에 넣으십시오.

td {
    text-align: center;
    vertical-align: middle;
}
— 보리스
소스
25

긴 손 인라인 예제 :

<td style='text-align:center;vertical-align:middle'></td>

속기 CSS 예제 :

td{
 text-align:center;
 vertical-align:middle;
}
— 헤이든 토링
소스
5

<td align="center" valign="center">textgoeshere</td>

전자 메일 형식에 가장 일반적으로 사용되는 오래된 기능인 테이블 작업을 수행하기 때문에 정답입니다. 따라서 가장 좋은 방법은 스타일뿐만 아니라 인라인 스타일과 알려진 테이블 태그를 사용하는 것입니다.

— 레미
소스
5
valignHTML5에서는 더 이상 사용되지 않습니다. 사용하지 마십시오. 이메일 형식의 경우 style태그 또는 인라인 style속성이 가장 좋습니다.
— Sean the Bean
1

선택기> 자식 :

.text-center-row>th,
.text-center-row>td {
  text-align: center;
}
<table border="1" width='500px'>
  <tr class="text-center-row">
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
  <tr class="text-center-row">
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>
스 니펫 확장

— 페르난도
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.