Korzystam z HTML <table>
i chcę wyrównać tekst <td>
do środka w każdej komórce.
Jak wyśrodkować wyrównywanie tekstu poziomo i pionowo?
Korzystam z HTML <table>
i chcę wyrównać tekst <td>
do środka w każdej komórce.
Jak wyśrodkować wyrównywanie tekstu poziomo i pionowo?
Odpowiedzi:
Oto przykład z CSS i style
atrybutami wbudowanymi :
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>
EDYCJA : valign
Atrybut jest przestarzały w HTML5 i nie należy go używać.
Przykład długiej ręki:
<td style='text-align:center;vertical-align:middle'></td>
krótszy przykład css:
td{
text-align:center;
vertical-align:middle;
}
<td align="center" valign="center">textgoeshere</td>
Jest to jedyna poprawna odpowiedź imho, ponieważ pracujesz z tabelami, które są starą funkcją najczęściej używaną do formatowania wiadomości e-mail. Więc najlepszym rozwiązaniem jest nie używanie tylko stylu, ale styl wbudowany i znane tagi tabeli.
valign
jest przestarzałe w HTML5. Nie używaj tego. W przypadku formatowania wiadomości e-mail najlepszym rozwiązaniem byłby style
tag lub style
atrybut wbudowany .
Selektor> dziecko:
.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
powinno być zastosowane dotr
elementu?