Help aligning <ul> in a <div>

[jamiet757]

I am running up against a bit of a problem on a blog I am helping someone with.

 

The theme is fairly simple, no sidebars, nothing fancy.

There is a header image, and underneath that is the Nav. They are square images with rollover properties, and they are in a <ul>. The problem is, no matter what I try, I cannot get them to be centered in the page, they always line up to the left.

 

They need to remain side-by-side, not stacked, so the <li> items are floated left. Even when I try wrapping the <ul> in a <div> and setting the margin-left and right to auto, I see no effects.

 

How can I get this bugger to be centered? Here is the CSS:

 

div.cssmenu {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }

ul.cssmenu {
    list-style: none;
    padding: 0px;
    position: inherit;
    }


ul.cssmenu li {
    float: left;
    }

ul.cssmenu li a {
    display: block;
    width: 111px;
    height: 109px;
    }

 

and here is the section that creates the Nav:

 

<div class="cssmenu"><ul class="cssmenu">
    <li class="sidehome"><a href="http://carolinaines.com/blog" title="Home"></a></li>
    <li class="sideabout"><a href="http://carolinaines.com/blog/about" title="Blog"></a></li>
    <li class="sidegallery"><a href="http://flickr.com/carouselambra86" target="_blank" title="Contact"></a></li>
    <li class="sidearchive"><a href="http://carolinaines.com/blog/links" class="selected" title="Home"></a></li>
    <li class="sidearchives"><a href="http://carolinaines.com/blog/archives" title="Blog"></a></li>
    <li class="sidecontact"><a href="http://carolinaines.com/blog/contact" title="Contact"></a></li>
</ul>
</div>

 

 

Any help is greatly appreciated!

[jamiet757]

Well, I was able to get it to align correctly using this:

http://www.pmob.co.uk/pob/centred-float.htm