Resimler herhangi bir web uygulamasının önemli bir parçasıdır. Bir web uygulamasında çok fazla görselin yer alması genellikle tavsiye edilmez ancak görsellerin ihtiyaç duyulan yerde kullanılması önemlidir. CSS, web uygulamalarındaki görsellerin görünümünü kontrol etmemize yardımcı olur.
Bir görüntüyü hizalamak, görüntüyü merkeze, sola ve sağa konumlandırmak anlamına gelir. Şunu kullanabiliriz: batmadan yüzmek mülkiyet ve Metin hizalama görüntülerin hizalanması için özellik.
Eğer görüntü div elementinin içindeyse, o zaman şunu kullanabiliriz: Metin hizalama div'deki görüntüyü hizalamak için kullanılan özellik.
mb vs gb
Örnek
Bu örnekte, görüntüleri kullanarak hizalıyoruz. Metin hizalama mülk. Görüntüler div öğesindedir.
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"> Şimdi Test Edin Çıktı
Float özelliğini kullanma
CSS float özelliği bir konumlandırma özelliğidir. Bir elemanı sola veya sağa iterek diğer elemanların onun etrafına sarılmasını sağlamak için kullanılır. Genellikle görseller ve düzenlerle kullanılır.
60'ın yüzde 10'u
Elemanlar yalnızca yatay olarak yüzdürülür. Yani elemanları yukarı veya aşağı değil, yalnızca sola veya sağa kaydırmak mümkündür. Yüzen bir eleman mümkün olduğu kadar sola veya sağa hareket ettirilebilir. Basitçe, kayan bir öğenin en solda veya en sağda görüntülenebileceği anlamına gelir.
Örnek
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"> Şimdi Test Edin Çıktı
