CSS hilft uns, die Anzeige von Bildern in Webanwendungen zu steuern. Das Zentrieren von Bildern oder Texten ist eine häufige Aufgabe in CSS. Um ein Bild zu zentrieren, müssen wir den Wert von festlegen Rand links Und Rand rechts Zu Auto und machen Sie es zu einem Blockelement, indem Sie das verwenden Bildschirmsperre; Eigentum.
Wenn sich das Bild im div-Element befindet, können wir das verwenden Textausrichtung: Mitte; Eigenschaft zum Ausrichten des Bildes in der Mitte des Div.
Der Das Element soll ein Inline-Element sein, das durch Anwenden von leicht zentriert werden kann Textausrichtung: Mitte; Eigenschaft von CSS auf das übergeordnete Element, das sie enthält.
Hinweis: Das Bild kann nicht zentriert werden, wenn die Breite auf 100 % (volle Breite) eingestellt ist.
Wir können die Abkürzungseigenschaft verwenden Marge und stellen Sie es ein Auto zum Ausrichten des Bildes in der Mitte, anstatt das zu verwenden Rand links Und Rand rechts Eigentum.
VLC Media Player auf YouTube herunterladen
Sehen wir uns an, wie man ein Bild durch Anwenden zentriert Textausrichtung: Mitte; Eigenschaft zu seinem übergeordneten Element.
Beispiel
In diesem Beispiel richten wir die Bilder mithilfe von aus Textausrichtung: Mitte; Eigentum. Das Bild befindet sich im div-Element.
Java-Typkonvertierung und -Casting
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> Testen Sie es jetzt Ausgabe
Beispiel
Jetzt verwenden wir das margin-left: auto; Rand rechts: auto; Und Bildschirmsperre; Eigenschaften zum Ausrichten des Bildes in der Mitte.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Testen Sie es jetzt Ausgabe
