CSS ile içeriği dikey ortalama yöntemleri

04 Aralık 2009, admin

[adrotate group="2" banner="1"]

css_image CSS kullanarak içeriği (resim, yazı vb.), sayfada dikey hizalama (vertical alignment) veya başka bir deyişle dikey ortalama (vertical centering) ile ilgili nette bulduğum yöntemleri burada yazmak istedim.

Yöntemler diyorum çünkü içeriği dikey ortalama konusunun çeşitli zorlukları var. Browser’dan browser’a farklılık gösteriyor. Bazılarında çalışmazken, bazılarında da görünümde hatalara sebep oluyor. Aşağıda 5 ayrı yöntemden bahsettim.

Ek olarak aşğıdaki CSS kodlarının (5. yöntem hariç) düzgün çalışması için sayfayı hem genişlikte hemde yükseklik için 100% olarak ayarlamanız gerekiyor. Aşağıdaki CSS kodunu sayfanıza eklerseniz, bahsedilen yöntemler düzgün çalışacaktır.

CSS Stil yapısı

* {

 margin:0;

 padding:0

 }

 html,body {

 height:100%;

 width:100%;

 }

Artık yöntemlere geçebiliriz.

Yöntem 1 :

Bu yöntem; <div>’leri, table yapısında göstermeye dayanıyor. Table yapısında gösterdiğimizden, table’ın vertical-align (dikey hizalama) özelliğini kullanıyoruz. Şöyleki;

HTML yapı

<div id="wrapper">

 <div id="cell">

 <div>

 İçerik buraya gelecek..

 </div>

 </div>

 </div>

CSS Stil yapısı

#wrapper {

 display:table;

 height:100%;

 }

 #cell {

 display:table-cell;

 vertical-align:middle;

 }

Yöntemin artıları;

İçerik, dinamik olarak yüksekliğini ayarlayabilir (CSS’den ayrıca ayarlamaya gerek yok),
İçerik , wrapper içerisinde yeterli yer olmasa da kesintiye uğramaz. (table yapısından dolayı)

Yöntemin eksileri;

İnternet Explorer’da çalışmıyor (ie 8 hariç)
Çok fazla içi içe katman kullanımı.

Yöntem 2 :

Bu yöntemde; pozisyon özelliği; absolute olarak kullanılıyor, top değeri 50% verilmiş, margin-top özelliğinde ise değer olarak; içeriğin yükseklik değerinin yarısı, negatif değerde kullanılıyor. Yani içeriğimizin yüksekliği sabit olmalı.. Şöyleki;

HTML yapı

<div id="content">

 İçerik buraya gelecek..

</div>

CSS Stil yapısı

#content {

 position:absolute;

 top:50%;

 height:240px;

 margin-top:-120px; /* yüksekliğin yarı değerinin negatifi*/

 }

Yöntemin artıları;

Bütün browser’larda çalışıyor.
İç içe katman yapısı yok.

Yöntemin eksileri;

Fazla içerik ve bu içerik için yeterli yer olmadığı takdirde içerik aşağı kayıyor ve kaydırma çubuğu çıkıyor.

Bu yöntemi kullanacaksanız, içeriğinizi sabit tutmalısınız ve ona göre bir yükseklik değeri vermelisiniz, aksi takdirde yani içerik fazla ve yükseklik yeterli değilse, içerik aşağı doğru kayma yapıyor, dikey merkezden çıkıyor. Kendiniz de denemeler yaparsanız ne demek istediğimi daha kolay anlayacaksınız.

Yöntem 3 :

Bu yöntemde; İçeriği tutan div yapısının üstüne bir katman daha ekliyoruz. Bu katmanın yüksekliğini 50%, alt margin değerini, içeriğin yüksekliğinin yarısının negatifi olarak belirliyoruz. Clear ile float özelliğini engelliyoruz ve içeriğin ortada çıkmasını sağlıyoruz. Şöyleki;

HTML yapı

<div id="floater"></div>

<div id="content">

 İçerik buraya gelecek.

</div>

CSS Stil yapısı

#floater {

 float:left;

 height:50%;

 margin-bottom:-120px;

 }

 #content {

 clear:both;

 height:240px;

 position:relative;

 }

Yöntemin artıları;

Bütün Browser’larda çalışıyor.

Yöntemin eksileri;

Fazla içerik ve bu içerik için yeterli yer olmadığı takdirde içerik aşağı kayıyor ve kaydırma çubuğu çıkıyor.
Extra boş katman kullanılması ki, bu aslında o kadar da büyük bir sorun değil.

Bu yöntemde de 2. yöntemdeki gibi içeriğinize göre yükseklik değeri vermelisiniz. Ayrıca ie 8 ‘in altındaki versiyonlarda çalışabilmesi için floater katmanına width:1px; değerini vermeniz yeterli olacaktır.

Yöntem 4 :

Bu yöntemde de pozisyonu absolute olarak ayarlıyoruz. Tek bir <div> kullanıyoruz, yükseklik ve genişlik değerlerini sabit tutuyoruz. Top ve bottom değerlerini 0 olarak tanımlıyoruz ve margin:auto kullanarak, içeriğin ortaya yerleşmesini sağlıyoruz. Aslında bu da, yatayda ortalamak için kullandığımız; margin:0 auto ile benzer bir durum.

HTML yapı

<div id="content">

 Content here

</div>

CSS Stil yapısı

#content {

 position:absolute;

 top:0;

 bottom:0;

 left:0;

 right:0;

 margin:auto;

 height:240px;

 width:70%;

 }

Yötemin artıları;

Oldukça kolay..

Yöntemin eksileri;

İnternet Explorer’da çalışmıyor (ie 8 hariç).
Fazla içerik ve bu içerik için yeterli yer olmadığı takdirde içerik aşağı kayıyor ve kaydırma çbuğu çıkıyor.

Yöntem 5 :

Bu yöntem aslında tek satırlık textler için kullanışlı, katmanın yüksekliği ile aynı değerde satır yüksekliği yani line-height verdiğimizde, içerik yani tek satırlık text ortaya yerleşiyor.Şöyleki;

HTML yapı

<div id="content">

 Content here

</div>

CSS Stil yapısı

#content {

 height:100px;

 line-height:100px;

 }

Yöntemin artıları;

Bütün browser’larda çalışıyor.
Yeterli alan olmadığında kesilme olmuyor.

Yöntemin eksileri :

Sadece textlerde çalışıyor.
Birden fazla satır olduğunda doğal olarak bozulma oluyor.

Bu yöntem içeriği sayfada ortalamaz, içeriği kendi yapısının içerisinde ortalar. Özellikle, buton içerisine text hizalamada çok kullanışlı bir yöntem.

Yukarıda bahsedilen yöntemlerden 1. yöntem kullanışlı ve zahmetsiz.. Ancak tabi ie 8′in altında çalışmaması düşündürücü. 3. yöntem ise yine dikey ortalama da tercih edilebilecek bir yöntem. Çünkü clear:both, kullanıldığı için üzerinde farklı yerleşim düzeninde farklı içerikler kullanılabilir.

Ben bu yöntemlerden bazılarını kendimde kullanıyorum. Siz de denemeler yaparak hangisinin daha kullanışlı olduğuna kendiniz karar verebilirsiniz. Teşekkürler..

Yararlanılan kaynaklar :