HTML (Hypertext Markup Language) ist eine der Grundsprachen zum Erstellen von Webseiten. Beim Web-Interface-Design werden häufig Bilder verwendet. Wie zentriert man also Bilder in HTML?
Im Folgenden sind drei Methoden aufgeführt, die mithilfe von CSS, HTML-Tabellen bzw. HTML5-Tags implementiert werden.
Methode 1: Verwenden Sie CSS, um das Bild zu zentrieren
Sie können die Margin-Eigenschaft von CSS verwenden, um das Bild vertikal und horizontal zu zentrieren.
Schritte:
Ein Bild in HTML einfügen:
<img src="图片路径" alt="图片描述">
Nach dem Login kopieren
Legen Sie den Stil des img-Elements in der CSS-Datei fest
img {
display: block;
margin: 0 auto;
}
Nach dem Login kopieren
Erklärung:
display: block; Konvertieren Sie das Bild in eine Blockebene Element, ermöglicht die horizontale Zentrierung.
margin: 0 auto; wird verwendet, um die Ränder des Bildes auf auto zu setzen, und das Bild wird horizontal in seinem Container zentriert.
Methode 2: HTML-Tabelle verwenden, um das Bild zu zentrieren
Sie können das HTML-Tabellenelement und das align-Attribut verwenden, um eine vertikale und horizontale Zentrierung des Bildes zu erreichen.
Schritte:
Erstellen Sie eine Tabelle in HTML:
<img src="图片路径" alt="图片描述">
Nach dem Login kopieren
Das align-Attribut der Tabelle ist auf „center“ gesetzt:
<img src="图片路径" alt="图片描述">
Nach dem Login kopieren
Erläuterung: Das align-Attribut im
wird verwendet, um die vertikale und horizontale Ausrichtung des darin enthaltenen Inhalts festzulegen.
Wenn Sie ein Bild zu einem
-Element hinzufügen, das in einem
-Element verschachtelt ist, wird das -Element zentriert.
Methode 3: Verwenden Sie HTML5-Tags, um das Bild zu zentrieren
HTML5 führt einige neue semantische Tags ein, z. B. , ,
Schritte:
Erstellen Sie Bilder mit den Tags Bepflanzung:
Das -Tag erstellt einen separaten Block für ein Bild, und das -Element ist das Element.
Das CSS-Stylesheet weist den Browser an, das -Element als Tabelle darzustellen und horizontal zu zentrieren.
Zusammenfassung
Durch CSS, HTML-Tabellen und HTML5-Tags können wir den Effekt der vertikalen und horizontalen Zentrierung von Bildern im Webdesign erzielen. Sie können anhand der tatsächlichen Situation die Methode auswählen, die am besten zu Ihnen passt.
Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Bilder in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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
