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!
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
In dem Artikel wird die Verwendung von UseEffect in React, einen Haken für die Verwaltung von Nebenwirkungen wie Datenabrufen und DOM -Manipulation in funktionellen Komponenten erläutert. Es erklärt die Verwendung, gemeinsame Nebenwirkungen und Reinigung, um Probleme wie Speicherlecks zu verhindern.
Lazy Ladeverzögerung des Ladens von Inhalten bis zur Bedarf, Verbesserung der Webleistung und Benutzererfahrung durch Reduzierung der anfänglichen Ladezeiten und des Serverlasts.
In dem Artikel wird das Currying in JavaScript, einer Technik, die Multi-Argument-Funktionen in Einzelargument-Funktionssequenzen verwandelt. Es untersucht die Implementierung von Currying, Vorteile wie teilweise Anwendungen und praktische Verwendungen, Verbesserung des Code -Lesens
Funktionen höherer Ordnung in JavaScript verbessern die Übersichtlichkeit, Wiederverwendbarkeit, Modularität und Leistung von Code durch Abstraktion, gemeinsame Muster und Optimierungstechniken.
Der Artikel erläutert den Versöhnungsalgorithmus von React, der das DOM effizient aktualisiert, indem virtuelle DOM -Bäume verglichen werden. Es werden Leistungsvorteile, Optimierungstechniken und Auswirkungen auf die Benutzererfahrung erörtert.
Der Artikel erläutert den Usecontext in React, was das staatliche Management durch Vermeidung von Prop -Bohrungen vereinfacht. Es wird von Vorteilen wie zentraler Staat und Leistungsverbesserungen durch reduzierte Neulehre erörtert.
In Artikeln werden das Standardverhalten bei Ereignishandlern mithilfe von PURDDEFAULT () -Methoden, seinen Vorteilen wie verbesserten Benutzererfahrungen und potenziellen Problemen wie Barrierefreiheitsproblemen verhindern.
In Artikel werden die Verbindungskomponenten an Redux Store mit Connect () verbinden, wobei MapStatetoprops, MapDispatchtoprops und Leistungsauswirkungen erläutert werden.
