Jak wyśrodkować tekst w wierszu tabeli HTML?

222

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?

Rajagopal 웃
źródło

Odpowiedzi:

323

Oto przykład z CSS i styleatrybutami 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>

http://jsfiddle.net/j2h3xo9k/

EDYCJA : valignAtrybut jest przestarzały w HTML5 i nie należy go używać.

David Laberge
źródło
1
Czy to nie vertical-align:middlepowinno być zastosowane do trelementu?
posfan12
53

CSS do centrowania tekstu w twoich tdelementach to

td {
  text-align: center;
  vertical-align: middle;
}
Carsten
źródło
29

Spróbuj umieścić to w pliku CSS.

td {
    text-align: center;
    vertical-align: middle;
}
Boris
źródło
25

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;
}
Hayden Thring
źródło
5

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

Remi
źródło
5
valignjest przestarzałe w HTML5. Nie używaj tego. W przypadku formatowania wiadomości e-mail najlepszym rozwiązaniem byłby styletag lub styleatrybut wbudowany .
Sean the Bean
1

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>

Fernando
źródło
-1

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

więcej na temat Valign

Balaswamy Vaddeman
źródło
12
atrybut valign nie jest obsługiwany w HTML5. Zamiast tego użyj CSS.
T30