So zentrieren Sie Text in HTML-Tabellenzellen: Eine praktische Anleitung

Tabellenzellen ausrichten: Eine Anleitung zum Zentrieren von Text in HTML-Tabellen

In der Welt der Webentwicklung bleiben Tabellen ein wertvolles Werkzeug zum Strukturieren und Organisieren von Daten. Gelegentlich kann es vorkommen, dass Sie den Text in Ihren Tabellenzellen sowohl horizontal als auch vertikal zentrieren müssen. Dieser Artikel bietet Ihnen eine umfassende Lösung, um diese Ausrichtung zu erreichen.

Horizontales Zentrieren von Text mithilfe von CSS und Inline-Stilen

Eine effektive Methode zum horizontalen Zentrieren von Text Tabellenzellen erfolgen über CSS-Stile oder Inline-Stilattribute. In Ihrer CSS-Datei oder im HTML-Dokument selbst können Sie die Eigenschaft „text-align“ für Ihre Zieltabellenzellen in „center“ ändern:

1. CSS-Stile:

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

2. Inline-Stilattribute:

   <code class="html"><td style="text-align: center;">Text</td></code>

Text vertikal zentrieren mit CSS

Um Text innerhalb von Tabellenzellen vertikal zu zentrieren, verwenden Sie die CSS-Eigenschaft „vertikal-align“:

1. CSS-Stile:

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

2. Inline-Stilattribute:

   <code class="html"><td style="vertical-align: middle;">Text</td></code>

Hier ist ein Beispiel, das sowohl horizontale als auch vertikale Zentrierung kombiniert CSS und Inline-Stile:

<code class="css">td {
    height: 50px; 
    width: 50px;
}

#cssTable td {
    text-align: center; 
    vertical-align: middle;
}</code>

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

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Text in HTML-Tabellenzellen: Eine praktische Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!