CSS ile yeni tanışanlar için yaptıkları menü örneklerinde menüyü tam ortalı hale getirmek için çoğu forumda sorularını gördüm ve bu makaleyi hazırlama gereği duydum, Arka plan genişliği %100 ve içerisindeki menü sayfanın genişliğinde göre tam ortalı bir biçimde kalması için doğru css kodlama gerekir.
CSS İle Menüyü Ortalama’nın Ön İzlemesi
CSS İle Menüyü Ortalama’nın Nasıl Yapıldığı
HTML
<div class=”menu-kutusu”>
<ul class=”menu”>
<li><a href=”#”>Anasayfa</a></li>
<li><a href=”#”>Hakkımızda</a></li>
<li><a href=”#”>İletişim</a></li>
</ul>
</div>
CSS
ol, ul {
list-style: none;
}
.menu-kutusu {
width:100%;
height:50px;
background:grey;
text-align:center; /** içerisindeki divi ortalar **/
}
.menu li a {
float:left;
display:block;
margin:10px;
padding:5px;
background:blue;
color:white;
text-decoration:none;
}
.menu {
margin:0 auto;
width:280px; /** bu değer girilmezse ortalanacak bir kutu değeri alamaz **/
height:50px;
}
Örnek olarak bu şekilde yaptım, eğer sorun yaşarsan yorum at yardımcı olurum.