Wie kann man den Text in der HTML-Tabellenzeile zentrieren?

222

Ich verwende einen HTML-Code <table>und möchte den Text <td>in jeder Zelle an der Mitte ausrichten .

Wie zentriere ich den Text horizontal und vertikal?

Rajagopal 웃
quelle

Antworten:

323

Hier ist ein Beispiel mit CSS- und Inline- styleAttributen:

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/

BEARBEITEN : Das valignAttribut ist in HTML5 veraltet und sollte nicht verwendet werden.

David Laberge
quelle
1
Soll das nicht vertical-align:middleauf das trElement angewendet werden ?
Posfan12
53

Das CSS zum Zentrieren von Text in Ihren tdElementen ist

td {
  text-align: center;
  vertical-align: middle;
}
Carsten
quelle
29

Versuchen Sie, dies in Ihre CSS-Datei aufzunehmen.

td {
    text-align: center;
    vertical-align: middle;
}
Boris
quelle
25

Long Hand Inline Beispiel:

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

Kurzschrift CSS-Beispiel:

td{
 text-align:center;
 vertical-align:middle;
}
Hayden Thring
quelle
5

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

Ist die einzig richtige Antwort imho, da Sie mit Tabellen arbeiten, die alte Funktionalität, die am häufigsten für die E-Mail-Formatierung verwendet wird. Daher ist es am besten, nicht nur Stil, sondern auch Inline-Stil und bekannte Tabellen-Tags zu verwenden.

Remi
quelle
5
valignist in HTML5 veraltet. Benutze es nicht. Für die E-Mail-Formatierung ist ein styleTag oder ein Inline- styleAttribut die beste Lösung.
Sean the Bean
1

Selektor> Kind:

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

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

mehr über valign

Balaswamy Vaddeman
quelle
12
Das Attribut valign wird in HTML5 nicht unterstützt. Verwenden Sie stattdessen CSS.
T30