Bilder sind ein wichtiger Bestandteil jeder Webanwendung. Das Einfügen vieler Bilder in eine Webanwendung wird im Allgemeinen nicht empfohlen, es ist jedoch wichtig, die Bilder dort zu verwenden, wo sie benötigt werden. CSS hilft uns, die Anzeige von Bildern in Webanwendungen zu steuern.
Ein Bild ausrichten bedeutet, das Bild in der Mitte, links und rechts zu positionieren. Wir können das nutzen schweben Eigentum und Textausrichtung Eigenschaft für die Ausrichtung von Bildern.
Wenn sich das Bild im div-Element befindet, können wir das verwenden Textausrichtung Eigenschaft zum Ausrichten des Bildes im div.
Beispiel
In diesem Beispiel richten wir die Bilder mithilfe von aus Textausrichtung Eigentum. Die Bilder befinden sich im div-Element.
div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> Testen Sie es jetzt Ausgabe
Verwendung der Float-Eigenschaft
Die CSS-Eigenschaft float ist eine Positionierungseigenschaft. Es wird verwendet, um ein Element nach links oder rechts zu schieben, sodass andere Elemente es umschließen können. Es wird im Allgemeinen mit Bildern und Layouts verwendet.
Elemente werden nur horizontal verschoben. Es ist also nur möglich, Elemente nach links oder rechts zu verschieben, nicht nach oben oder unten. Ein schwebendes Element kann so weit wie möglich nach links oder rechts verschoben werden. Einfach ausgedrückt bedeutet dies, dass ein schwebendes Element ganz links oder ganz rechts angezeigt werden kann.
Beispiel
img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> Testen Sie es jetzt Ausgabe
