5 replies [Last post]
hkmulligan
Offline
newbie
Last seen: 14 years 19 weeks ago
Joined: 2007-07-17
Posts: 4
Points: 0

Title is pretty self explanitory.

I've got a horizontal nav bar made with an unordered list by setting 'float: left', but for the life of me I can't center it. Any advice?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I don't think you can - at

I don't think you can - at least not without specifying the width of the menu container. Typically you would use float:left on a menu (as opposed to display:inline) when you wanted the boxes containing the menuitems to all be the same width. If you are doing that, presumably you can calculate the width of the containing element. If that is the case, give the container that width and "margin-left:auto; margin-right:auto" to centre it.

Another alternative is to use display:inline-block. inline-block can be given widths and they can be centered using "text-align:center" on their parent. Unfortunately its support isn't great cross browser.

The third alternative is to give up on having similar widths and to use display:inline and text-align:center. Good use of padding can space the menu items attractively.

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 11 years 28 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Center horizontal menu

please try this code. This will center your horizontal menu

div.razer {
height:100%;
width:778px;
margin-left:auto;/* centre for compliant browsers */
margin-right:auto;/* centre for compliant browsers */
position:relative;/* gain stacking context for absolutely placed element */

div#menu{width:100%display:block;background-color:#0099CC;height:21px;

}
div#menu ul li{float:left; list-style:none;;ext-align:center;border:1px solid #009999;}
}

Your code structure:




:thumbsup:

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Spelling mistakes aside ,

Spelling mistakes aside Wink, did you try it Razer?

- You haven't specified a width on your floats, in which case you may as well use display:inline.
- All you are doing is centering div#razer, not the menu.

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 11 years 28 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Thanks Cris

I had identify the width but the width should be calculate according to the number of menu by width of menu.I think that will center the menu too.But the debug is width should be define accurate for accrate centre

hkmulligan
Offline
newbie
Last seen: 14 years 19 weeks ago
Joined: 2007-07-17
Posts: 4
Points: 0

Thanks!

Razer that worked perfectly, thanks a lot