Wie zentriere ich Text in einer HTML-Tabelle sowohl horizontal als auch vertikal?

Text in einer HTML-Tabelle horizontal und vertikal ausrichten

In einer HTML-Tabelle den Text in jeder Zelle horizontal und vertikal zentrieren, kann die Darstellung und Lesbarkeit Ihrer Daten verbessern. Hier ist eine detaillierte Anleitung, um dies zu erreichen:

Horizontale Ausrichtung

Um den Text horizontal zu zentrieren, verwenden Sie die CSS-Eigenschaft text-align. Fügen Sie text-align: center; zum style-Attribut des Elemente. Dadurch wird der Text in der Mitte jeder Zelle ausgerichtet.

Vertikale Ausrichtung

Für die vertikale Ausrichtung wenden Sie die CSS-Eigenschaft „vertikal ausrichten“ an. Vertikale Ausrichtung festlegen: Mitte; um sicherzustellen, dass der Text innerhalb der Zellen vertikal zentriert ist. Diese Eigenschaft muss möglicherweise basierend auf der Höhe der Zellen angepasst werden.

Beispiel mit Inline-Styling

Sie können Inline-Stile innerhalb der Tabelle verwenden, um diese Ausrichtungen anzuwenden:

<code class="html"><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></code>

Beispiel mit CSS-Klasse

Alternativ können Sie eine CSS-Klasse erstellen, um die Ausrichtungen anzuwenden:

<code class="css">.center-text {
  text-align: center;
  vertical-align: middle;
}</code>

Und diese verwenden in der Tabelle:

<code class="html"><table border="1">
  <tr>
    <td class="center-text">Text</td>
    <td class="center-text">Text</td>
  </tr>
</table></code>

Denken Sie daran, dass die angegebene Höhe und Breite der Zellen die vertikale Ausrichtung beeinflussen kann. Passen Sie die Werte nach Bedarf an, um das gewünschte Ergebnis zu erzielen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Text in einer HTML-Tabelle sowohl horizontal als auch vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!