Heim > Artikel > Web-Frontend > Was ist das Center-Attribut in HTML? Erklärung zum Zentrieren von HTML-Text und Bildern (mit Beispielen)
Was ist das Center-Attribut in HTML? Erklärung zum Zentrieren von HTML-Text und Bildern (mit Beispielen)
- 寻∝梦Original
- 2018-09-03 17:07:2210838Durchsuche
Dieser Artikel stellt das Align-Attribut in HTML vor und stellt auch vor, wie das HTML-Align-Attribut Bilder zentrieren kann . Der Inhalt dieses Artikels
1. Lassen Sie uns zunächst über das Zentrierungsattribut in HTML sprechen:
Heute empfehlen wir die Verwendung des align-Attributs. align Attribute können verwendet werden in vielen Tags In diesem Artikel wird hauptsächlich die Verwendung des align-Attributs zum Zentrieren von Text und Bildern vorgestellt.
Lassen Sie uns nun über das HTML-Alignment-Attribut sprechen, um den Text zu zentrieren:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <body> 这是一段文字，没有任何的标签，看看我现在在哪 </body> </html>
Dies ist ein einfacher Code, der den Effekt anzeigt im Bild gezeigt:
Was Sie sehen, wird ohne Verwendung von Tags implementiert und standardmäßig in der oberen linken Ecke des Browsers angezeigt.
Jetzt wollen wir den Text oben zentrieren.
Ja, es ist das align-Attribut, das ich am Anfang des Artikels eingeführt habe. Wir fügen das align-Attribut hinzu.
Schauen wir uns nun den Code an:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <body> <p align="center">这是一段文字，没有任何的标签，看看我现在在哪</p> </body> </html>
Da die Textbeschriftung ursprünglich durch das Absatz-p-Tag zusammengefasst wurde, verwenden wir hier das p-Tag und fügen ein Ausrichtungsattribut gleich „center“ hinzu. Das heißt, der gesamte Text im p-Tag wird in der Mitte angezeigt. Schauen wir uns den Screenshot des Effekts an:
Diese werden alle in der Mitte des Browsers angezeigt.
So wird das HTML-Align-Attribut zum Zentrieren von Text verwendet. (Wenn Sie mehr sehen möchten, finden Sie hier das HTML-Online-Video-Tutorial auf der chinesischen PHP-Website)
2. Schauen wir uns nun die Verwendung des align-Attributs zum Zentrieren an das Bild:
Wir alle wissen, dass Bild-Tags mit dem einzelnen Tag angezeigt werden, daher lautet der angezeigte Code wie folgt:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <body> <p align="center">这是一段文字，没有任何的标签，看看我现在在哪</p> <img src="https://img.php.cn/upload/article/000/000/003/5b49b1f76ccb9475.jpg" alt="Was ist das Center-Attribut in HTML? Erklärung zum Zentrieren von HTML-Text und Bildern (mit Beispielen)" > </body> </html>
Ich habe ein Netzwerkbild hinzugefügt Werfen Sie jetzt einen Blick auf den obigen Code. Wirkung:
Offensichtlich wird dieses Bild standardmäßig in der oberen linken Ecke des Browsers angezeigt. Versuchen wir nun, das align-Attribut zum img-Tag hinzuzufügen:
<body> <p align="center">这是一段文字，没有任何的标签，看看我现在在哪</p> <img src="https://img.php.cn/upload/article/000/000/003/5b49b1f76ccb9475.jpg" align="middle" alt="Was ist das Center-Attribut in HTML? Erklärung zum Zentrieren von HTML-Text und Bildern (mit Beispielen)" > </body>
Ich habe oben das align-Attribut hinzugefügt, und der Effekt hat sich schnell geändert. Dies muss natürlich in HTML4.01 verwendet werden. Deshalb werde ich das Bild hier nicht zeigen. Solange es jeder verstehen kann.
Die Einführung dieses Artikels zum align-Attribut von HTML endet hier. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.
[Empfehlung des Herausgebers]
Ist das HTML-Tbody-Tag ein Element auf Blockebene? Grundlegende Verwendung des HTML-Tbody-Tags
Das obige ist der detaillierte Inhalt vonWas ist das Center-Attribut in HTML? Erklärung zum Zentrieren von HTML-Text und Bildern (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!