Hi,
I have this HTML

<div class="someClass">
   <ul>
      <li><a href="index.html">1</a></li>
      <li><a href="index.html">2</a></li>
      <li><a href="index.html">3</a></li>
      <li><a href="index.html">4</a></li>
      <li><a href="index.html">5</a></li>
   </ul>
</div>

Problem:

I want to make the <a>s to shape like a square, with height = 20px and width = 20px. I can make it have the height and width if I make it float: left. In there the problem occur cause I need the <ul> to be centered but it won't because of the float:left of the <a>.

how can I make it centered with fix height and width of the anchors?

note: anchors don't have fixed length... the sample is just 5, but it can also grow to 7, or 9. I also need the links to be inline in view.