HTML 테이블의 내용 중심을 맞추는 방법은?

HTML 테이블의 내용 중심을 맞추는 방법은?

HTML을 사용하고 있습니다.<table>그리고 나는 텍스트를 정렬하고 싶습니다.<td>각 감방의 중심으로.

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

여기 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/

편집: 더valignHTML5에서 attribute가 더 이상 사용되지 않으므로 사용하지 마십시오.

CSS는 당신의 가운데 텍스트에td요소들은

td {
  text-align: center;
  vertical-align: middle;
}

HTML 인라인 스타일 예제:

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

CSS 파일 예제:

td {
    text-align: center;
    vertical-align: middle;
}

이것을 당신의 CSS 파일에 넣어보세요.

td {
  text-align: center;
  vertical-align: middle;
}

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

전자 메일 서식에 가장 일반적으로 사용되는 오래된 기능인 테이블을 사용하고 있기 때문에 유일한 정답입니다.따라서 스타일만 사용하는 것이 아니라 인라인 스타일과 알려진 테이블 태그를 사용하는 것이 최선입니다.

Selector > child:

.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>

부트스트랩을 사용하는 경우 내장 클래스를 사용할 수 있습니다.

<table class="text-center align-middle">

목록 테이블의 내용(다중 줄)을 세로로 정렬하기 위해 다음 작업을 수행했습니다.

.. list-table::
   :class: longtable
   :header-rows: 1
   :stub-columns: 1
   :align: left
   :widths: 20, 20, 20, 20, 20

   * - Classification
     - Restricted
     - Company |br| Confidential
     - Internal Use Only
     - Public
   * - Row1 col1
     - Row1 col2
     - Row1 col3 
     - Row1 col4
     - Row1 col5

테마 overrides .css 옵션 사용 정의:

.stub {
       text-align: left;
       vertical-align: top;
}

제가 'python-docs-theme'을 사용하는 테마에서 셀 항목은 'stub' 클래스로 정의됩니다.브라우저 개발 메뉴를 사용하여 셀 컨텐츠에 대한 테마 클래스가 무엇인지 검사하고 그에 따라 업데이트합니다.

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

발린에 더 많은.

언급URL : https://stackoverflow.com/questions/8986260/how-to-center-the-contents-of-an-html-table