Obrazy są ważną częścią każdej aplikacji internetowej. Generalnie nie zaleca się umieszczania dużej liczby obrazów w aplikacji internetowej, ale ważne jest, aby używać ich tam, gdzie jest to potrzebne. CSS pomaga nam kontrolować wyświetlanie obrazów w aplikacjach internetowych.

Wyrównanie obrazu oznacza umieszczenie obrazu pośrodku, w lewo i w prawo. Możemy skorzystać z platforma własność i wyrównanie tekstu właściwość wyrównywania obrazów.

Jeśli obraz znajduje się w elemencie div, możemy użyć elementu wyrównanie tekstu właściwość do wyrównywania obrazu w div.

Przykład

W tym przykładzie wyrównujemy obrazy za pomocą wyrównanie tekstu nieruchomość. Obrazy znajdują się w elemencie div.

 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"> 

Przetestuj teraz

Wyjście

Korzystanie z właściwości float

Właściwość CSS float jest właściwością pozycjonowania. Służy do przesuwania elementu w lewo lub w prawo, umożliwiając owinięcie się wokół niego innym elementom. Jest powszechnie używany w przypadku obrazów i układów.

Elementy unoszą się wyłącznie poziomo. Zatem możliwe jest jedynie przesuwanie elementów w lewo lub w prawo, a nie w górę lub w dół. Element pływający można przesunąć maksymalnie w lewo lub w prawo. Oznacza to po prostu, że element pływający może być wyświetlany skrajnie po lewej stronie lub skrajnie po prawej stronie.

Przykład

 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"> 

Wyjście

narzędzie do wycinania w Ubuntu