Как выровнять текст по центру строки html таблицы?

222

Я использую HTML <table>и хочу выровнять текст <td>по центру в каждой ячейке.

Как центрировать текст по горизонтали и вертикали?

Раджагопал 웃
источник

Ответы:

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

CSS для центрирования текста в ваших tdэлементах

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>

Это единственный правильный ответ imho, так как ваша работа с таблицами, которая является старой функциональностью, наиболее часто используется для форматирования электронной почты. Поэтому лучше всего не использовать только стиль, а встроенный стиль и известные теги таблиц.

Remi
источник
5
valignустарела в HTML5. Не используйте это. Для форматирования электронной почты лучшим решением будет styleтег или встроенный styleатрибут.
Шон Боб
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>

Фернандо
источник
-1

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

больше о ценности

Баласвами Ваддеман
источник
12
Атрибут valign не поддерживается в HTML5. Вместо этого используйте CSS.
T30