Divleri Ortalamak

Vatanay Özbeyli CSS3, Tasarım Unsurları

Web tasarımcılarının en çok canını sıkan konulardan birine el atıyoruz. Sayfanın dikey ve yatay olarak tam ortasına div yerleştirmek artık sizler için çocuk oyuncağı olacak.

Yapmamız gereken tek şey <html> tagını tablo, <body> tagını da tablo hücresi olarak tanımlamak.  Böylece sıradan bir vertical-align:middle kodu ile işlemimizi tamamlamış oluyoruz.

Sayfanızın ortasına bir div oluşturacağınızı varsayarak örnek hazırlayalım.

ÖRNEĞİ GÖRÜNTÜLE

Uygulama

CSS Kodları

body {
 width:100%;
 height:100%;
 margin:0;
 padding:0;
}

html {display:table;}

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

.ortalama {
 max-width:50em;
 margin:0 auto;
}

HTML Kodları

<div class="ortalama">adobewordpress.com</div>

Notlar

  • Böylece güncel browserlarda(IE8+, Safari, Opera, Firefox ve Chrome) sorunsuz olarak çalışır.
  • Dikey ortalama IE’nin -7 versiyonlarında çalışmamaktadır fakat yatay ortalama çalışır.

Uygulamadan önce örneği test etmenizi öneririm.

Bu konuya tekrar değinip yeni bir kod dizimi hazırladım. Neredeyse tüm browserlarda çalışan bu yeni kod dizimini aşağıdaki başlıktan görüntüleyebilirsiniz.

CSS ile Ekranın Tam Ortası