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;}

It took me too long to complete the new version of this tool, but — finally — css Template Shaker 2.4 is available for download. One new template added, one modification of existing template (made after user request), several new and updated features (the most important addition is the visual image selector).