Heim Web-Frontend HTML-Tutorial 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)

Sep 03, 2018 pm 05:07 PM
align html img p

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>
Nach dem Login kopieren

Dies ist ein einfacher Code, der den Effekt anzeigt im Bild gezeigt:

Was ist das Center-Attribut in HTML? Erklärung zum Zentrieren von HTML-Text und Bildern (mit Beispielen)

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>
Nach dem Login kopieren

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:

Was ist das Center-Attribut in HTML? Erklärung zum Zentrieren von HTML-Text und Bildern (mit Beispielen)

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 Was ist das Center-Attribut in HTML? Erklärung zum Zentrieren von HTML-Text und Bildern (mit Beispielen) 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="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/003/5b49b1f76ccb9475.jpg"  class="lazy"   alt="Was ist das Center-Attribut in HTML? Erklärung zum Zentrieren von HTML-Text und Bildern (mit Beispielen)" >
</body>
</html>
Nach dem Login kopieren

Ich habe ein Netzwerkbild hinzugefügt Werfen Sie jetzt einen Blick auf den obigen Code. Wirkung:

Was ist das Center-Attribut in HTML? Erklärung zum Zentrieren von HTML-Text und Bildern (mit Beispielen)

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="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/003/5b49b1f76ccb9475.jpg"  class="lazy"   align="middle" alt="Was ist das Center-Attribut in HTML? Erklärung zum Zentrieren von HTML-Text und Bildern (mit Beispielen)" >
</body>
Nach dem Login kopieren

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

Was ist der Code zum Hinzufügen von Bildern in HTML? Wie füge ich den Bildpfad korrekt in HTML hinzu?

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles