Jump to content

Centered horizontal menu


Long Con
 Share

Recommended Posts

Hi, I'm pretty new at CSS, and I want to make a horizontal menu for a website.I was told that float:left on my unordered list would take it from vertical lameness to awesome horizontality - and it did - but I would like to center the menu on the page, and it is left-aligned.How can I make a horizontal menu that is centered?

Link to comment
Share on other sites

Add float left and display: block to the list items (li) not the list itself, and then margin: 0 auto to the list and see if that works.

Link to comment
Share on other sites

Floated elements get outside of the page flow, to an extent. They won't be affected by text-align. You can't center elements if they're floated.If you would like to center menu elements you can use display:inline instead of floating them. The only problem is that you won't be able to style them as blocks. (margins, width, height ...)

Link to comment
Share on other sites

That depends if the ul is a fixed width or fluid. If the list is fixed, as in total width of li combined, then margin:0 auto will work.else a combination of using container div and position relative sould work.menu_outer {clear:both;float:left;overflow:hidden;width:100%;}ul#menu {float:left;left:50%;list-style-type:none;margin:0 auto;padding:0;position:relative;}ul#menu li {float:left;position:relative;right:50%;}I know this works for menu without submenus, not sure with though.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...