CSS, web uygulamalarındaki görsellerin görünümünü kontrol etmemize yardımcı olur. Görüntülerin veya metinlerin ortalanması CSS'de yaygın bir görevdir. Bir görüntüyü ortalamak için değerini ayarlamamız gerekir. kenar boşluğu-sol Ve kenar boşluğu-sağ ile Oto ve bunu kullanarak bir blok elemanı yapın. Ekran bloğu; mülk.
Eğer görüntü div elementinin içindeyse, o zaman şunu kullanabiliriz: metin hizalama: ortala; görüntüyü div'de merkeze hizalamak için kullanılan özellik.
elemanın uygulanmasıyla kolayca merkezlenebilen bir satır içi eleman olduğu söylenir. metin hizalama: ortala; CSS'nin özelliğini onu içeren ana öğeye aktarır.
Not: Genişlik %100 (tam genişlik) olarak ayarlanırsa görüntü ortalanamaz.
Kısayol özelliğini kullanabiliriz marj ve bunu şu şekilde ayarlayın: Oto kullanmak yerine görüntüyü merkeze hizalamak için kenar boşluğu-sol Ve kenar boşluğu-sağ mülk.
java dizesine karakter ekleme
Bir görüntüyü uygulayarak nasıl ortalayacağınızı görelim. metin hizalama: ortala; özelliği, ana öğesinin özelliğidir.
Örnek
Bu örnekte, görüntüleri kullanarak hizalıyoruz. metin hizalama: ortala; mülk. Görüntü div öğesindedir.
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"> Şimdi Test Edin Çıktı
Örnek
Şimdi, şunu kullanıyoruz: sol kenar boşluğu: otomatik; sağ kenar boşluğu: otomatik; Ve Ekran bloğu; görüntüyü merkeze hizalamak için özellikler.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Şimdi Test Edin Çıktı
