Heim >Web-Frontend >CSS-Tutorial >Wie zentriere ich Inhalte in einer CSS-Tabelle? Einführung in Textstile in CSS-Tabellen
Wie zentriere ich Inhalte in einer CSS-Tabelle? Einführung in Textstile in CSS-Tabellen
- 寻∝梦Original
- 2018-09-07 13:38:2110570Durchsuche
Wissen Sie, wie der Inhalt der CSS-Tabelle zentriert wird? Wissen Sie, wie Sie den Text einer CSS-Tabelle so gestalten, dass er linksbündig ist? Wissen Sie, wie man die richtige Ausrichtung für eine CSS-Tabelle einstellt? Diese Inhalte warten darauf, von Ihnen in diesem Artikel erfahren zu werden.
Lassen Sie uns zunächst vorstellen, wie der Inhalt in der CSS-Tabelle zentriert wird:
Zu Beginn stellen wir ein Attribut vor. Es ist dieses Attribut, das ausmachen kann Die Tabelle im Zentrieren Sie den CSS-Stil .
text-align: Dieses Attribut legt die horizontale Ausrichtung des Textes fest.
Nehmen wir ein vollständiges Beispiel:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
table,td{text-align:center;border-style:solid}
</style>
</head>
<body>
<table style="width:200px;height:150px">
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
</body>
</html>Jeder sollte sich über diesen Effekt im Klaren sein, also werfen wir einen Blick auf die im Browser angezeigte Darstellung:
Ist es nicht offensichtlich? Natürlich wurde das rote Kästchen darin gezeichnet, als ich den Screenshot gemacht habe. Machen Sie sich über diese Details keine Sorgen. Mal sehen, ob diese Texte in der Mitte angezeigt werden. Der Effekt ist immer noch sehr deutlich, sodass unser erster Test erfolgreich war.
Werfen wir nun einen Blick auf die zweite Funktion:
Was ist die zweite? Es geht darum, dass unser Text nicht nur eine Zentrierungsfunktion haben sollte, nämlich die Textausrichtung Das Attribut hat auch zwei weitere Werte:
-
text-align:right: Die rechte Ausrichtungsfunktion zeigt den Effekt auf der rechten Seite an. Sehen wir uns das Beispiel später an
text-align:center: Über dieses zentrierte Attribut muss ich nicht mehr sagen, es wurde gerade getestet.
text-align:left: Linke Ausrichtungsfunktion, der Anzeigeeffekt wird auf der linken Seite angezeigt. Dies ist im Allgemeinen der Standard-Texteffekt. Die Standardeinstellung ist so. Warum richten Sie es also ein? (Wenn Sie mehr über CSS-Attribute erfahren möchten, lesen Sie die Spalte CSS-Referenzhandbuch auf der chinesischen PHP-Website)
Jetzt werde ich es tun Geben Sie ein weiteres Beispiel ein, die oben genannten drei kombinierten Codes:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
table,td{border-style:solid;}
.zuo_1{text-align:left;}
.you_1{text-align:right;}
.zhong_1{text-align:center;}
</style>
</head>
<body>
<table style="width:200px;height:150px">
<tr class="zuo_1"><td>11</td><td>22</td></tr>
<tr class="you_1"><td>22</td><td>44</td></tr>
<tr class="zhong_1"><td>33</td><td>66</td></tr>
</table>
</body>
</html> Dies ist ein weiterer vollständiger Code. Der obige fügt nun einen Klassennamen zu jeder der drei Richtungen hinzu. Es fühlt sich an, als wäre es in die Irre gegangen. Auch wenn es anders aussieht, ist die Bedeutung deutlich erkennbar. Schauen wir uns den Effekt an:
Wie im Bild gezeigt, entspricht der erste dem Standard links, der zweite rechts. und der dritte in der Mitte. Der Effekt ist immer noch sehr offensichtlich. So verwenden wir das Text-Align-Attribut. Wenn Sie mehr sehen möchten, empfehle ich, in der Spalte CSS-Lernhandbuch auf der chinesischen PHP-Website zu lernen.
Dieser Artikel über das Text-Alignment-Attribut endet hier. Schüler, die Fragen haben, können mir unten eine Nachricht hinterlassen.
[Empfehlung des Herausgebers]
Wie richte ich eine ungeordnete Liste in CSS ein? Zusammenfassung der Listenstile in CSS
Das obige ist der detaillierte Inhalt vonWie zentriere ich Inhalte in einer CSS-Tabelle? Einführung in Textstile in CSS-Tabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!