CSS ile resimler nasıl ortalanır :)

Birçok günlük sitesi yazılarında fotoğrafları, ekran görüntü resimlerini v.b. kullanıyorlar. Ancak bu görüntülerin sola hizalanmış olması bence hoş görünmüyor. Bu nedenle uzunca bir süredir kendi yazılarımda da buna dikkat ediyorum. Sizler de faydalanabilin diye yöntemi açıklıyorum.

CSS ile resimler nasıl ortalanır 🙂

Aslında yöntem kolay. Resim etiketinin içerisine CSS sınıfı tanımlıyorsunuz. O sınıfı ise CSS dosyanıza eklemeniz yeterli.

CSS stil dosyanıza eklemeniz gereken satır alttaki olacak.

.aligncenter{display: block;margin: 0 auto 20px auto;float: none;clear: both;}

Gördüğünüz üzere fonksiyon adı aligncenter. PDF dosyaları nasıl birleştirilir başlığında yer alan ortalanmış resmin stiline bakarsanız yine bu adı göreceksiniz.

Yönetim panelinden yazı yazarken ise ister elle ister başka türlü bu stili resim etiketine tanımlamanız gerekiyor. Eğer hala benim gibi BBcode ile çalışıyorsanız resim ekleme etiketi şöyle olacaktır normalde.

Resim

İşte buna yukarıdaki stili tanımlayacağız ve şöyle olacak.

Resim

Artık resimleriniz ortalanacaktır.

WordPress Metin editörü kullananlar için bu olay daha basit. Resim eklerken hizalamayı “ortalayı” seçebilirler. Ancak stil adımızı aligncenter olarak değil aligncenter olarak eklemeleri gerekiyor.