CSS: div hiçbir sabit boyutu bilinen Dikey dıv align | Netgez.com
SORU
26 AÄžUSTOS 2011, Cuma

CSS: div hiçbir sabit boyutu bilinen Dikey dıv align

Nasıl bir görüntü (ya da flash) CSS ile dikey olarak içeren <div> Hizala. Yükseklik ve genişlik dinamik.

CEVAP
1 EYLÃœL 2011, PERÅžEMBE

Bu yatay ve dikey olarak ya da kap, ne de çocuğun bilinen boyutları olmadan ortalamak için bu saf CSS2 bir çözümdür. Hayır kesmek katılıyor. this answer bunları keşfettim ve ben de this answer bunu gösterdi.

The solution satır yüksekliği sabit olan line-height: 0 ile birlikte vertical-align: middle dayanmaktadır.

HTML:

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract" alt="" />
    </span>
</span>

Ve CSS:

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

IE8, 9, 11.51, Safari 5.0.5, FF Opera 6.0, Chrome 13.0 Windows 7 üzerinde test edilmiştir.

Sadece ihtar eden iki içteki unsurlar in this fiddle gösterildiği gibi bir satır boşluğu, IE 7,:

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>

Span ayrıca IE 7 için gerekli olduğunu unutmayın. Diğer her tarayıcıda span div şey olabilir.

Bunu PaylaÅŸ:
  • Google+
  • E-Posta
Etiketler:
HtmlDikey Hizalama CssCss

AYNI ETÄ°KETTEKÄ° VÄ°DEOLAR

YORUMLAR

SPONSOR VÄ°DEO

Rastgele Yazarlar

  • Electro Posé

    Electro PosÃ

    21 ÅžUBAT 2013
  • Top Gear

    Top Gear

    27 Mart 2006
  • Vicious Computers

    Vicious Comp

    14 EKÄ°M 2006

Ä°LGÄ°LÄ° SORU / CEVAPLAR

Ä°LGÄ°LÄ° BAÄžLANTILAR