So zentrieren Sie ein Bild auf einer Webseite mithilfe von HTML

Obwohl es nicht unbedingt schwierig ist, ist das Zentrieren von Bildern auf Ihren Webseiten möglicherweise komplizierter als Sie denken. Der Hauptgrund ist, dass die tag ist ein Inline-Element und verhält sich daher anders als Elemente auf Blockebene. Einige Ansätze verwenden HTML. andere verwenden CSS, und manche werden als "richtiger" betrachtet, da sie nicht veraltet sind. Wählen Sie zum Fortfahren eine Methode aus der folgenden Liste aus und befolgen Sie die Anweisungen.

Für die Unterstützung in HTML5 sollten Sie ein style-Attribut mit dem Wert text-align: center innerhalb eines Blockebenenelements verwenden. so wie ein Stichworte.

Beispiel HTML-Code

Tipp: Das Hinzufügen eines Inline-Stils, wie oben gezeigt, sollte nur einmal durchgeführt werden. Wenn Sie mehrere Bilder zentrieren möchten, sollten Sie den folgenden Vorschlag verwenden und eine CSS-Klasse erstellen, um redundanten Code zu reduzieren und Ihre Webseite zu beschleunigen.

Beispiel für Bildmitte mit obigem Code

Konvertierung in ein Element auf Blockebene

Eine Möglichkeit, Bilder richtig zu zentrieren, ist das Definieren der Element als Blockebenenelement. Fügen Sie dazu dem Kopf Ihrer Seite eine Regel (siehe folgendes Beispiel) oder eine verknüpfte externe CSS-Datei hinzu.

Beispiel HTML-Code

 .centerImage {text-align: center; Bildschirmsperre; } 

Mit diesem Code können Sie die centerImage- Klasse auf eine anwenden tag, ohne es in einem Block-Level-Element verschachteln zu müssen. Diese Methode funktioniert für mehrere Bilder.

Beispiel zentrierter Bildcode

Verwenden der Tags

Sie können ein Bild zentrieren, indem Sie das Symbol einschließen tag in der Stichworte. Diese Aktion zentriert das und nur das Bild auf der Webseite. Es ist zu beachten, dass diese Methode in HTML5 nicht mehr empfohlen wird und nicht immer in allen Browsern funktionieren wird. Wir empfehlen, diese Methode nur zu verwenden, wenn keiner der anderen oben genannten Vorschläge dort funktioniert, wo Sie versuchen, ein Bild zu zentrieren.

Beispiel HTML-Code