Genişliği Belli Olmayan Blok-level Elemanları Yatayda Ortalamak

10 Haziran 2011

CSS ile yatayda ortalamak deyince aklımıza hep genişliği sabit olan alanlar geliyor. Ancak genişliği sabit olmayan elemanları ortalamak biraz daha farklı oluyor.

Genişliği sabit olan blok-level elemanları ortalamak için birçok kaynak var iken genişliği belli olmayan blok-level elemanları ortalamak için çok fazla kaynak bulamıyoruz. Google’da yaptığım aramalarda rastladığım makalelerde 2 yöntem ile karşılaştım. Bu iki metodu sizlerle paylaşacağım, siz kendinize uygun olan metodu uygulayabilirsiniz.

Metot 1 - Yüzde Yöntemi ile Ortalama

Genelde bu yöntemi anlatırken menü örnekleri üzerinden anlatılmış bende geleneği bozmayayım.

<div class="menuKapsulu">
  <ul>
     <li>Elma</li>
     <li>Armut</li>
     <li>Malta Eriği</li>
  </ul>
</div>

Alışkın olduğumuz bir menü kodu. CSS kodumuzu ekleyelim. İlk olarak kapsayıcı eleman tanımlarını yazalım.

.menuKapsulu{
  float:left;
  width:100%;
  background:#369;
  overflow:hidden;
  position:relative;
}

Menü kapsayıcısının sayfayı tam kaplaması için %100 değeri ve float:left değeri atandı.

.menuKapsulu ul{
  clear:left;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  left:50%;
  text-align:center;
  background-color:#990000
}

float:left değeri ile içeriği çepeçevre kapsaması sağlanıyor. left:50% değeri ile menu ortalanıyor. Ancak bu ortalama içeriğin genişliğiniiçermez.

.menuKapsulu ul li{
  display:block;
  float:left;
  list-style:none;
  margin:0 10px 0 0;
  padding:10px 0;
  position:relative;
  right:50%;
}

Buradaki püf noktası; right:50% değeri ile menü genişliğinden dolayı sağa doğru kayan içeriği tam olarak ortalı hale getiriyoruz.

İnternet Explorer 6+, Firefox2+, Safari, Chrome ve Opera destekliyor.

Avantajları

  • Tüm tarayıcılar destekliyor.
  • Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
  • Kolay kullanımı
  • Farklı tarayıcılar için farklı kod yazımı gerektirmemesi

Dezavantajları

  • Kapsayıcı elemana atana overflow:hidden nedeni ile yaşanabilecek olumsuzluklar. Mesela açılır menülerde sorun olur.
  • Ortalanacak eleman kapsayıcısı, yani burada ul ortalı olmadığı için background, border ve kendini gösterecek diğer tanımların yapılmaması gerekir. Buda bir dezavantajdır.

Metot 2: display:table Metodu

Genişliği belli olan elemanları ortalarken kullandığımız margin:0 auto tanımını bu sefer genişliği belli olmayan alanlar içinde kullanıyoruz.

HTML kodumuz aynı;

<div class="menuKapsulu">
  <ul>
    <li>Elma</li>
    <li>Armut</li>
    <li>Malta Eriği</li>
  </ul>
</div>

Ortalanacak alana margin:0 auto ve display:table tanımlarını yapıyoruz.

.menuKapsulu ul{ 
  list-style:none; 
  margin-left: auto;
  margin-right: auto; 
  display: table; 
} 

.menuKapsulu ul li{ 
  float:left;
  margin:0 10px 0 0; 
  padding:10px 0; 
}

Sonuç istediğimiz gibi, ancak bir sorunumuz varki oda display:table özelliğini İnternet Explorer 6 ve 7. sürümleri desteklemiyor. Peki, ne olacak derseniz bu bir hasLayout sorunu ve çözüm için zoom:1 tanımı kullanmamız gerekiyor.

#menuKapsulu ul{
 list-style:none;
 margin-left: auto;
 margin-right: auto;
 display: table;
}

#menuKapsulu ul li{
 float:left;
 margin:0 10px 0 0;
 padding:10px 0;
}

Kapsayıcı kapsüle text-align:center tanımı yapıyoruz sonra listemize display:inline yapıyoruz. text-align:center inline elemanları ortalıyor bildiğiniz gibi. Burada yaptığmızda bu

Avantajları

  • Tüm tarayıcılar destekliyor.
  • Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
  • Birinci mettodaki overflow:hidden dan kaynaklana sorun burada yoktur.
  • Birinci metotdaki ul ye görsel özellik tanımlayamama sorunu bu metotda yok.

Dezavantajları

  • Farklı tarayıcılar için farklı kod yazımı gerektirmesi

Kullandıkça avantaj ve dezavantajlarını daha iyi göreceğiz.

Kalın sağlıcakla.

Kaynaklar

Daha fazla oku

Sayfa planlama sihirbazı grid-template-areas

CSS Izgara ile sihirbazlık yapıyoruz. grid-template-areas ve grid-area özelliklerini açıklıyoruz. Devamını oku

İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi İpucu

10 April 2019 tarihinde yayınlandı.

SVG ikonlarımıza gölge vermek

05 April 2019 tarihinde yayınlandı.