How to center this <ul>?

So far i have this code:

function changeGeoLoc($a,$b,$c){
e开发者_如何学运维cho "<ul style='list-style-type: none; display:inline;'>";

while(list(,$geoloc) = each($a) AND list(,$Details) = each($b)) {
echo "<li style='list-style-type: none; display:inline; padding-right:5px;'>$Details {$c->$geoloc} </li>";
}
echo "</ul>";

}

which produces this:

Does anyone know how to make the above centered so its in the middle?

Any ideas appreciated.

Thankyou

Update: I have tried styling as a block and doing margin:0 auto with a fixed with but thats a problem, i need it to stretch along 100% of the width because the fields 'IP, City, Region, Country Name and Country Code will be filled in via GeoLoc services automatically, so having a fixed width of say 500px is not big enough therefore it needs to be the whole width, I want it centred because if there is someone viewing my webpage that there info doesnt use the whole width it would look better centered. I hope this makes sense.

---

Try this:

<ul style='list-style-type: none; display:block; width:500px; margin:0 auto;'>

---

If you want to center the content of the UL without providing a fixed width probably the easiest way is the following:

function changeGeoLoc($a,$b,$c){
echo "<ul style='list-style-type: none; text-align: center;'>";

while(list(,$geoloc) = each($a) AND list(,$Details) = each($b)) {
echo "<li style='list-style-type: none; display:inline; padding-right:5px;'>$Details {$c->$geoloc} </li>";
}
echo "</ul>";

}

---

Wrap the ul in a div and then add this CSS:

.className {
    margin:0 auto;
}

HTML:

<div class="className">
<ul style='list-style-type: none; display:inline;'>
<li style='list-style-type: none; display:inline; padding-right:5px;'>Stuff</li>
</ul>
</div>

Change the ul style to block