Centering CSS Menu
Saturday, August 16th, 2008I 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;
}
View the centered css menu example.
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;}
The example is here.