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ş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • BlackmillMusic

    BlackmillMus

    3 Kasım 2010
  • kalabrandmusic

    kalabrandmus

    25 Kasım 2009
  • Blu animations and other videos

    Blu animatio

    15 HAZİRAN 2007