The UL tag is not centered with the field: 0 auto; css style

Question

I am trying to create a pager that will sit in the center of the div. Basically the code is as follows:

<div class="cms-pager"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> 

If I specify CSS as follows:

  .cms-pager { } .cms-pager ul { background-color: somecolor; margin: 0 auto; } .cms-pager ul li { padding: 5px; margin: 3px; } 

then UL will not center, as it has the width / background color for the whole div. I just won’t work.

If I specify CSS as follows:

  .cms-pager { } .cms-pager ul { width: 200px; background-color: somecolor; margin: 0 auto; } .cms-pager ul li { padding: 5px; margin: 3px; } 

then UL is centered on the page. The problem is that I had to specify a fixed width: 200 pixels; and if I have only 1 or 2 links, then it is exactly in the center. So this is not for me, I need UL to really have the width of the actual LI tags and be precisely defined by the width.

If I specify CSS as follows:

  .cms-pager { margin: 0 auto; } .cms-pager ul { float: left; background-color: somecolor; margin: 0 auto; } .cms-pager ul li { padding: 5px; margin: 3px; } 

then the background UL is gray only under LI 1 - 3. Therefore, I know that the size is OK. But since I had to use float: left style, it automatically aligns to the left and ignores the div: 0 field auto style;

If I specify CSS as follows:

  .cms-pager { margin: 0 auto; text-align: center } .cms-pager ul {background-color: somecolor; margin: 0 auto; display: inline-block; } .cms-pager ul li { padding: 5px; margin: 3px; } 

This version works for Firefox, Chrome, but not for IE6 / 7, because it does not work correctly with the built-in block;

Is there any solution to this problem? Is the only solution to use various tags like table tr td, or is there anything you can do about it?

Answer 1

Is it close enough? No floating, no built-in blocks. Just simple blocks and alignments.

 .cms-pager, .cms-pager ul { margin: 0 auto; } .cms-pager { text-align: center; } .cms-pager ul li { display: inline; width: 10px; background-color: gray; padding: 5px; } 

Here's a preview.