Yatay <li> Elemanlarını Nasıl Ortalarız?

centering ul li Yatay <li> Elemanlarını Nasıl Ortalarız?Yatay menü tasarımlarında sıklıkla kullandığımız <ul> içerisindeki <li> öğelerini ortalamak aslında gayet basit.

Birkaç basit CSS koduyla Firefox, Chrome ve Internet Explorer gibi yaygın tarayıcılarla uyumlu olarak çalışan bir ortalayıcı hazırlayabilirsiniz.

Süreç

Örnek olarak basit bir <ul> ve <li> menü tipi oluşturalım.

<ul>
<li>Menü 1</li>
<li>Menü 2</li>
<li>Menü 3</li>
</ul>

Normal şartlarda bu tarz bir kodlama yazdığımızda elde edeceğimiz sonuç bu şekilde olur:

ul li normal Yatay <li> Elemanlarını Nasıl Ortalarız?

İstediğimiz sonuç bu değil. O yüzden bizde mantık yürüterek tüm <li> kodlarına CSS kullanarak float:left atarız. Böylece sırayla sola yaslanırlar ve yatay konuma gelirler. Fakat bu işlemi yaptıktan sonra içinde bulundukları <ul> içerisinde sağ taraf boş kalır ve ortalama işlemi can sıkıcı bir hal alır.

Düz mantık çözmek isterseniz <ul> değerine bir width değeri atayabilir, sonrasında da yine margin:auto ile işin içinden çıkabilirsiniz. Hadi ama, yıl 2013. Mobil cihazlara uygun tasarımlar yapmakla yükümlüyüz. Sabit width değeri de ne?

Nasıl yapılır?

İşlem aslında gayet basit. İşin komik kısmı ise float komutuna bile ihtiyacımız yok. Üstteki HTML kodlarına atayacağınız CSS kodlarında display:inline-block satırının bulunması tüm sorunu çözecektir. Fakat bizler yine de Internet Explorer kullanıcıları için ek olarak *display ve *zoom komutlarını da ekleme gereği duyuyoruz.

Adobewordpress tamamıyla tasarım geliştiricilerine hitap eden bir web sayfası olsa da ziyaretçilerinin %5‘i hala IE kullanmakta. Hal böyleyken IE uyumuna dikkat etmeye devam ediyoruz.

Az önceki HTML kodlarımızı tekrar hatırlayalım.

<ul>
<li>Menü 1</li>
<li>Menü 2</li>
<li>Menü 3</li>
</ul>

Şimdi de CSS kodlarımızı ekleyelim.

ul{
text-align:center;
}

ul li{
 display:inline-block;
 *display:inline; /*IE7*/
 *zoom:1; /*IE7*/
}

Bu kadar basit.

Kapanış

Anlatımı pekiştirmek için sizlerle canlı bir örnek paylaşma gereği duyduk.

facebook Yatay <li> Elemanlarını Nasıl Ortalarız?twitter Yatay <li> Elemanlarını Nasıl Ortalarız?diggit Yatay <li> Elemanlarını Nasıl Ortalarız?tumblr Yatay <li> Elemanlarını Nasıl Ortalarız?email Yatay <li> Elemanlarını Nasıl Ortalarız?google Yatay <li> Elemanlarını Nasıl Ortalarız?stumbleupon Yatay <li> Elemanlarını Nasıl Ortalarız?pinterest Yatay <li> Elemanlarını Nasıl Ortalarız?buffer Yatay <li> Elemanlarını Nasıl Ortalarız?flattr Yatay <li> Elemanlarını Nasıl Ortalarız?reddit Yatay <li> Elemanlarını Nasıl Ortalarız?linkedin Yatay <li> Elemanlarını Nasıl Ortalarız?

Anahtar Kelimeler : , , , , , , , , , , , , , , , , , ,

  • Yasin

    Net ortamında zor bulunacak türden paylaşımlar yapıp, bizi bilgilendiriyorsun. Gerçekten helal olsun kardeşim sana.