how to center UL in my page?

we have a problem of making the ul-ed blocks of buttons on the top of the page ideal to the center.

here is the link.

nick.georates.net/selectcountry.html

can you give a h开发者_C百科int how in the css adjust so that the buttons will be in the middle for any resolution of the page????

thanks beforehand

the ul with the class = "shortcut-buttons-set" inherits a padding-left:40px; try to overwrite that in the "shortcut-buttons-set" class

As you have five <li> you can set their width as 20%, whith margin:auto links will appear center.

li {
    margin:0;
    padding:0;
    width:20%;
    float:left;
}
a {
    width:103px;
    margin:auto;
}

Enclose your UL element inside a DIV with a width of 100%

<div style="width: 100%;">
    <ul class="shortcut-buttons-set">
        <li></li>
        <li></li>
        <li></li>
        <li></li>       
     </ul>
</div>

Apply this CSS to UL

.shortcut-buttons-set{
display:inline-block;
list-style:none outside none;
margin:0 auto;
padding:0;
}

and remove the property left:25% and right:25% to your LI element.

ul.shortcut-buttons-set li{
background:none repeat scroll 0 50% transparent;
float:left;
font-weight:bold;
***left:25%;***
margin:0 15px 0 0;
padding:0 !important;
position:relative;
***right:25%;***
text-align:center;
}

Give the ul element a width - in this case it would be 600px, as you have 5 buttons * 105px width and 15px margin for each button. Removing the padding set on the ul and the left and right values set on the li, and give the ul element this style:

.shortcut-buttons-set {
    margin: 0 auto;
    padding: 0;
    width: 600px;
}

ul.shortcut-buttons-set li {
    float: left;
    font-weight: bold;
    margin: 0 15px 0 0;
    padding: 0 !important;
    text-align: center;
}

Additionally, you'll want to use :last-child to remove the last 15px margin, so that the buttons are perfectly aligned.

.shortcut-buttons-set li:last-child {
    margin: 0;
}

Taking this into account, the width for the ul should now be 585px.