Я использую HTML <table>
и хочу выровнять текст <td>
по центру в каждой ячейке.
Как центрировать текст по горизонтали и вертикали?
Я использую 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>
РЕДАКТИРОВАТЬ : valign
атрибут не рекомендуется в HTML5 и не должен использоваться.
Пример длинной строки:
<td style='text-align:center;vertical-align:middle'></td>
сокращенный пример css:
td{
text-align:center;
vertical-align:middle;
}
<td align="center" valign="center">textgoeshere</td>
Это единственный правильный ответ imho, так как ваша работа с таблицами, которая является старой функциональностью, наиболее часто используется для форматирования электронной почты. Поэтому лучше всего не использовать только стиль, а встроенный стиль и известные теги таблиц.
valign
устарела в HTML5. Не используйте это. Для форматирования электронной почты лучшим решением будет style
тег или встроенный style
атрибут.
Селектор> ребенок:
.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>
<td align="center"valign="center">textgoeshere</td>
vertical-align:middle
должен применяться кtr
элементу?