Center ul sprite navigation

Question

I created a sprite image menu within WordPress using the following CSS:

/* 04 Microsites Navigation */
.micrositescontainer {
    background: url('img/microsites_main_bkg.jpg');
}

.micrositestopnav ul {
    display: block;
    font-size: 13px;
    list-style: none outside none;
    margin: 0;
    padding-left: 20%;
}

.micrositestopnav .horizontal-menu ul li {
    border-color: #FFFFFF;
    border-left: 0px solid #FFFFFF;
    float: left;
    padding: 0px 0 0 0;
}

/* Microsites Menu Items Start Here]*/
.micrositestopnav .menu-item-8449 a {
    background-image: url("img/micrositestopnav.png");
    background-position: 0 0;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.menu-item-8449.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8449.menu-item-object-page a:focus {
    background-image: url("img/micrositestopnav.png");
    background-position: 0 -125px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.current-menu-item.menu-item-8449 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8449 > a, .micrositestopnav li.current_page_item.menu-item-8449 > a, .micrositestopnav li.current_page_ancestor.menu-item-8449 > a {
    background-image: url("img/micrositestopnav.png");
    background-position: 0 -125px;
}

.micrositestopnav .menu-item-8453 a {
    background-image: url("img/micrositestopnav.png");
    background-position: -200px 0px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.menu-item-8453.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8453.menu-item-object-page a:focus {
    background-image: url("img/micrositestopnav.png");
    background-position: -200px -125px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.current-menu-item.menu-item-8453 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8453 > a, .micrositestopnav li.current_page_item.menu-item-8453 > a, .micrositestopnav li.current_page_ancestor.menu-item-8453 > a {
    background-image: url("img/micrositestopnav.png");
    background-position: -200px -125px;
}

.micrositestopnav .menu-item-8456 a {
    background-image: url("img/micrositestopnav.png");
    background-position: -400px 0;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.menu-item-8456.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8456.menu-item-object-page a:focus {
    background-image: url("img/micrositestopnav.png");
    background-position: -400px -125px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.current-menu-item.menu-item-8456 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8450 > a, .micrositestopnav li.current_page_item.menu-item-8456 > a, .micrositestopnav li.current_page_ancestor.menu-item-8456 > a {
    background-image: url("img/micrositestopnav.png");
    background-position: -400px -125px;
}

.micrositestopnav .menu-item-8481 a {
    background-image: url("img/micrositestopnav.png");
    background-position: -600px 0;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.menu-item-8481.menu-item-object-page:hover > a, .micrositestopnav ul ul:hover > a, .micrositestopnav li.menu-item-8481.menu-item-object-page a:focus {
    background-image: url("img/micrositestopnav.png");
    background-position: -600px -125px;
    display: block;
    height: 125px;
    outline: medium none;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

.micrositestopnav li.current-menu-item.menu-item-8481 > a, .micrositestopnav li.current-menu-ancestor.menu-item-8481 > a, .micrositestopnav li.current_page_item.menu-item-8481 > a, .micrositestopnav li.current_page_ancestor.menu-item-8481 > a {
    background-image: url("img/micrositestopnav.png");
    background-position: -600px -125px;
}
/* Microsites Menu Items End Here]*/
/* 04 Microsites Navigation End */

The menu works perfect but the other day when inspecting the site on Chrome Linux 33.0.1750.152 I noticed that the horizontal layout of the sprite images are not lined up in the same area. I believe that using the following code (padding-left: 20%) is causing this problem:

.micrositestopnav ul {
    display: block;
    font-size: 13px;
    list-style: none outside none;
    margin: 0;
    padding-left: 20% ;
}

I think my desire of wanting to center the sprite menu was poorly achieved by applying this quick solution above. I would like to know how a more experienced coder would center this area.

You can see the menu working on here http://betabooks.matthewflint.com . At the moment I can't upload images because I just joined this site, but please know that the sprite menu is in the upper header area on the beta site. The fourth image to the right is being forced down to the next line in Chrome. For me, it displays fine in Firefox 28.0.

I thank you for your time and consideration.

Answer 1

this may be the possible solution

remove float property of .horizontal-menu and update below properties in respective CSS

.horizontal-menu {
    text-align:center
}

.micrositestopnav ul{
    margin:0 auto;
}

Right now I can see 4 Li's with above method even if you increase or decrease number of Li it will still align center

Please check in other browsers as well Hope this helps.