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.

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

Gördüğünüz üzere fonksiyon adı img_orta. 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.

<img src="http://img.dmry.net/blog/01/pdf-dosyalari-nasil-birlestirilir-01.jpg" alt="Resim" />

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

<img src="http://img.dmry.net/blog/01/pdf-dosyalari-nasil-birlestirilir-01.jpg" alt="Resim" class="img_orta" />

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ı img_orta olarak değil aligncenter olarak eklemeleri gerekiyor.