Obwohl es nicht unbedingt schwierig ist, kann das Zentrieren von Bildern auf Ihren Webseiten komplizierter sein, als Sie denken. Der Hauptgrund ist, dass das -Tag ein Inline-Element ist und sich daher anders verhält als Elemente auf Blockebene. Einige Ansätze verwenden HTML oder CSS, und einige gelten als “richtiger” als andere, da sie nicht veraltet sind. Um ein Bild in der Mitte Ihrer Webseite zu positionieren, wählen Sie eine Methode aus der Liste unten aus und befolgen Sie die Anweisungen.
Verwendung des style-Attributs
Verwenden Sie zur Unterstützung in HTML5 ein style-Attribut mit dem Wert text-align:center innerhalb eines Elements auf Blockebene; wie
-Tags.
Beispiel HTML-Code
<p style="text-align:center;"><img src="https://www.computerhope.com/cdn/media/logo-200-gray.png" alt="Logo"></p>
Das Platzieren des obigen Codes in einem div kann sich darauf auswirken, wie er auf einem Bildschirm angezeigt wird. Wenn Sie beispielsweise den Code zu einem div mit einem rechten Rand hinzufügen, ändert sich die Position des zentrierten Bilds.
Das Hinzufügen eines Inline-Stils wie oben gezeigt sollte idealerweise nur einmal in einem Dokument erfolgen. Wenn Sie mehrere Bilder zentrieren müssen, verwenden Sie den folgenden Vorschlag und erstellen Sie eine CSS-Klasse, um redundanten Code zu reduzieren und Ihre Webseite zu beschleunigen.
Beispiel für Bildmitte mit obigem Code
Konvertieren in ein Element auf Blockebene
Eine Möglichkeit, Bilder richtig zu zentrieren, besteht darin, das -Element als Element auf Blockebene zu definieren. Fügen Sie dazu eine Regel zum Kopf Ihrer Seite hinzu (siehe folgendes Beispiel) oder eine verlinkte externe CSS-Datei.
Beispiel HTML-Code
<style type="text/css">
.centerImage
{
text-align:center;
display:block;
}
</style>
Mit diesem Code können Sie die centerImage-Klasse auf ein -Tag anwenden, ohne es in einem Element auf Blockebene verschachteln zu müssen. Diese Methode funktioniert für mehrere Bilder.
Beispielcode für zentriertes Bild
<img src="https://www.computerhope.com/cdn/media/logo-200-gray.png" class="centerImage" alt="CH Logo" height="120" width="350">
Verwenden des -Tags
Sie können ein Bild zentrieren, indem Sie das -Tag in die
Beispiel HTML-Code
<center><img src="https://www.computerhope.com/cdn/media/logo-200-gray.png" alt="what image shows" height="150" width="200"></center>
