SORU
10 ŞUBAT 2010, ÇARŞAMBA


Nasıl dikey div içinde resim merkezi

Böyle bir işaretleme var:

<div>
  <img />
</div>

Div ımg göre daha yüksek

div {
  height: 100px;
}

img {
  height: dynamic-value-smaller-than-100px;
}

Görüntü dıv (ve bunun üstünde ve altında boşluk aynı sebeple) ortasında olmak istiyorum.

Bu denedim ve çalışmıyor:

div {
  vertical-align: middle;
}

CEVAP
10 ŞUBAT 2010, ÇARŞAMBA


eğer görüntü tamamen dekoratif amaçlıdır, sonra arka plan resmi olarak kullanmak için daha çok semantik bir çözüm olabilir. Daha sonra arka plan konumunu belirtebilirsiniz

background-position: center center;

Değil dekoratif ve değerli bilgiler değildir sonra ımg etiketi haklı. Böyle bir durumda ne yapmak gerekir tarzı aşağıdaki özelliklere sahip içeren div

div{
    display: table-cell; vertical-align: middle 
}

Read more about this technique here. Rapor IE6/7 üzerinde çalışmıyor (IE8 çalışır).

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
Css

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • SegaAmerica

    SegaAmerica

    5 Mart 2008
  • SRT Photoshop Tutorials

    SRT Photosho

    19 Aralık 2012
  • tinycammonitor

    tinycammonit

    14 Aralık 2010