I receive this question relatively often: “how to center a menu generated with css menu generator”. Well, here are two examples - one for centering the menu on page and one for centering menu items. For both examples — I am using simple menu saved directly as xhtml file.

A) centering the menu on page

1) Put the menu in new DIV container (in this example - container class=”wrapper”):

<div class=”wrapper“>
<div class=”pd_menu_01 “>
<ul>
…
</ul>
</div>
</div>

2) in the css section, add this code to center the wrapper div:

.wrapper {
width: 80%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

B) Centering the text of the menu items

To center the text of the menu sub-items, just change the following css code:

.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}

to:

.pd_menu_01 ul {list-style-type:none;padding:0; margin:0; text-align:center;}

Tags: centering menu, css, css menu

This entry was posted on Saturday, August 16th, 2008 at 9:06 am and is filed under Uncategorized, WonderWebWare.com, css menu. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.