Nasıl dikey olarak tüm tarayıcılar için bir div ortalamak için?

SORU

28 Aralık 2008, Pazar

Nasıl dikey olarak tüm tarayıcılar için bir div ortalamak için?

Bir div CSS ile dikey olarak ortalamak için istiyorum. Tablo veya Javascript ama sadece saf CSS istemiyorum. Bazı çözümler buldum, ama hepsi İnternet Explorer 6 Desteği eksik.

<body>
    <div>Div to be aligned vertically</div>
</body>

Nasıl bir div dikey olarak tüm büyük tarayıcılar, Internet Explorer 6 dahil olmak üzere merkezi edebilirim?

CEVAP

31 Mayıs 2011, Salı

Aşağıda tüm dikey ve yatay olarak ortala bir sabit genişlikli için inşa edebilirim çözüm en iyisiesnek yükseklikiçerik kutusu. Test ve FF, Opera, Chrome, Ve Safari, ve MSIE 6 yeni sürümleri için çalışıyor .

HTML

<div class="outer">
<div class="middle">
<div class="inner">

<h1>The Content</h1>

<p>Once upon a midnight dreary...</p>

</div>
</div>
</div>

CSS

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

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

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: /*whatever width you want*/;
}

IE 7 ve üzeri için karşılamak için, bu değişiklikleri ayrı bir stil sayfası kullanımı:

<!--[if lte IE 7]><link rel="stylesheet... /><![endif]-->;

.outer {
    display: inline;
    top: 0;
}

.middle {
    display: inline;
    top: 50%;
    position: relative;
}

.inner {
    display: inline;
    top: -50%;
    position: relative;
}

See Test page

Bazı dinamik içerik esnekliği test etmek için yaptım. Eğer herhangi bir sorun görürse bilmek isterdim. İyi de -- ışıklı bindirmeleri merkezli çalışmalıdır, pop-up, vb.

Bunu Paylaş: