Wie zentriere ich Text in HTML-Tabellenzellen?

So zentrieren Sie Inhalte in einer HTML-Tabelle horizontal und vertikal

Das horizontale und vertikale Zentrieren von Text innerhalb der Zellen einer HTML-Tabelle kann das verbessern visuelle Attraktivität und Lesbarkeit der Seite. Um dies zu erreichen, sind zwei Methoden zu berücksichtigen: CSS und Inline-Stilattribute.

CSS-Methode:

1. Definieren Sie einen Stilblock im
2. Fügen Sie das folgende CSS hinzu:

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

Inline-Stil-Attributmethode:

1. Verwenden das style-Attribut direkt im Tags.
2. Setzen Sie die Eigenschaften „text-align“ und „vertikal-align“ für jede Tabellenzelle auf „center“.

Hier ist ein Beispiel, das beide Methoden demonstriert:

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

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table></code>

Im obigen Beispiel werden beide Tabellen mit zentriertem Textinhalt in allen Zellen angezeigt. Die CSS-Methode kann hilfreich sein, wenn Sie die Ausrichtung auf mehrere Tabellen anwenden oder das Stylesheet auf verschiedenen Seiten wiederverwenden möchten. Andererseits ermöglichen Inline-Stilattribute eine spezifischere Kontrolle über einzelne Zellen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Text in HTML-Tabellenzellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!