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:

İ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.