Bilmek istediğin her şeye ulaş

CSS'de değişken boyutlu bir imajı nasıl dikey olarak hizalarız?

sakallioglu.net/yenitema/single-page.php# adresteki side barda görünen imajları nasıl dikey olarak ortalarım? imajlarlar değişken olacağı için margin ya da padding veremiyorum. bir türlü işin içinden çıkamadım yardımlarınızı esirgemeyin :)Düzenle
İmajları dikey ve ortalarından hizalamak mı istiyorsunuz yoksa hepsini sola hizalamak mı tam anlayamadım. Ancak şu şekilde izah etmeye çalışayım anladığım kadarı ile;

CSS dikey imajları tam ortasından hizalamak istiyorsanız, her imajı sabit genişlikteki (maksimum genişliğiniz ne ise) bir div içine almalısınız ve içindeki her imajı margin: 0 auto; style satırı ekleyerek dikey ortalamış ve hizalamış olursunuz.

div.centeraligned { width:100px; }
div.centeraligned img{ margin:0 auto; }

Böylece; 100px genişliğinde bir kutunuz ve bu kutu içine koyduğunuz her imaj kutuya sağdan ve soldan ortaya hizalanmış olacaktır.

Ancak örnekte verdiğiniz sayfada sağda bulunan menü imajlarını içinde bulundukları kutuya üstten ve alttan eşit miktarda boşluk olmasını istiyorsanız durum biraz daha farklı. Bunu javascript veya JQuery ile gerçekleştirmeniz mümkündür. Ancak, bunu yapmadan önce biraz düşünmekte fayda var, çünkü bu şekilde bir görünüm çok iyi durmayabilir. Tasarımda hizalama çok önemlidir. Resimleri yanlarında bulunan yazılara uygun şekilde hizalamanızda fayda var. Ben yine de çalışacağını düşündüğüm scripti aşağıya yazıyorum.

$("#sidebar-thumbnail img").each(function () {
var img = $(this);
//Imajın yüksekliği
var height = img.height();
//Kutunun yüksekliği
var boxHeight = img.parent().height();

//Kutu yüksekliği daha büyükse, yani boşluk var ise;
//boşluğun yarısını imaja üst marjin olarak atarız
if (boxHeight > height)
img.css({ "margin-top": ((boxHeight - height) / 2) + "px" })
});

Umarım faydalı olur.
  • Paylaş
2

Utku Sakallıoğlu, Çok teşekkürler. Deneyeceğim bakalım işe yarayacak mı?

Hakan Köse, Rica ederim, umarım faydalı olur..

Sonraki Soru
HESAP OLUŞTUR

İstatistikler

898 Görüntülenme3 Takipçi1 Yanıt

Eş Anlamlı Soru Ekle

  • İmajları CSS ile nasıl dikey hizalarım?