Marginal Nightmare

Question

I tried my best, but for life I can not understand why the navigation menu will not be concentrated. I tried text-align, margin-auto, block display ... On parent and child. I'm sure this is something uber-simple, but it is starting to cause hair loss.

Demo is available here :

If you want to see some kind of code, here is the HTML :

<div id="navigation" class="col-full"> <ul id="main-nav" class="nav fl"> <li id="menu-item-266" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-266"><a href="http://previews.tinygiantstudios.co.uk/">Home</a></li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://previews.tinygiantstudios.co.uk/about-us/">About Us</a></li> <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://previews.tinygiantstudios.co.uk/news/">News</a></li> <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://previews.tinygiantstudios.co.uk/contact/">Contact</a></li> </ul> </div><!-- /#navigation --> 

And CSS

 #navigation { margin-bottom: 0px; background-color: #131313; border-top: 0px solid #DBDBDB; border-bottom: 0px solid #DBDBDB; border-left: 0px solid #DBDBDB; border-right: 0px solid #DBDBDB; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; font: 14px/14px sans-serif; padding: 10px 0; } .nav { z-index: 99; margin: 0; padding: 0; list-style: none; line-height: 1; margin-left: 10px; } .fl { float: left; } .nav li { float: left; width: auto; } 

Can someone show me what I am missing?

Thanks,

Answer 1

Add this code to your CSS:

 .nav { text-align: center; width: 100%; } .nav li { float: none; display: inline-block; /* IE7 should be pleased */ zoom: 1; *display: inline; } 

It will not work with older versions of IE ( inline-block ), but what will happen?

Answer 2

To set the fields to auto, you need to specify the width and display the element as a block.

Answer 3

Setting margin to zero / automatic only works with fixed width elements. Remove the built-in float for it to take effect.

Answer 4

To center with margin: 0 auto; your item must be display: block; , have a fixed width and cannot be placed using float .

So, you need to remove the fl class from <ul> and give it a fixed width.

Answer 5

You must specify a width for #navigation or #main-nav

Right now, C # navigation spans the full width of #wrapper and therefore cannot be the center. To fix problems, make them about 500 pixels wide.

If you want to center the main navigator instead of navigation, you must remove float:left; from it float:left; and give it a fixed width and margin: auto;