Center the individual Menu Items within a Horizontal Menu

Question

I want to center the Individual Menu items within this Horizontal CSS menu (obtained from purecssmenu.com).

They are currently floating to the left and I want them to be centered

<div class="wrapper">
    <ul class="pureCssMenu pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu1</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu2</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="pureCssMenum">
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu1</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Submenu2</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="pureCssMenum">
                <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu3</a></li>
                <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu4</a></li>
                <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu5</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu3</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="pureCssMenum">
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu1</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu2</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu4</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu5</a></li>
    </ul>
</div>

The complete HTML markup and CSS is available at this JsFiddle http://jsfiddle.net/28X9v/

The solution should be cross browser compatible and should atleast work in ie7/8

Answer 1

Remove float from your li's : Demo

ul.pureCssMenu, ul.pureCssMenu ul {text-align:center;}
ul.pureCssMenu li { display:inline-block;}

Answer 2

hey view testing this code

.pureCssMenum li > ul.pureCssMenum li{
  float: left;
 }
.pureCssMenum li > ul.pureCssMenum > li > ul.pureCssMenum{

   position:absolute;
     top:40px;
  }
.pureCssMenum li > ul.pureCssMenum > li > ul.pureCssMenui li{
   float:none;
   position:relative;

 }

http://jsfiddle.net/kisspa/LdXU5/

Answer 3

Make the following changes to your css

To increase the submenu width to accomodate right shifting

ul.pureCssMenu ul {
    width:110px;
}

and change the margin values to shift menu items to right

ul.pureCssMenu li {
    display:block;
    margin:2px 0px 2px 18px;
    font-size:0px;
}

You can change the last param of margin property to shift the elements more towards right.

here is the fiddle http://jsfiddle.net/28X9v/3/

Answer 4

I think this is the answer you want.

http://jsfiddle.net/28X9v/5/

<span>....</span>

is used for aligning in the code . That's it.