CODEWITHSUNDEEP
cssmarginhtml-listsalignment
feronovak
feronovak

Reputation: 2697

UL tag not centering with margin: 0 auto; css style

I am trying to create pager which will sit in the center of the div. Basically code looks like this:

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

If I specify CSS like this:

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

then UL wont center as it has width/background color across whole div. I will just not work.

If I specify CSS like this:

  .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. Problem is that I had to specify fixed width: 200px; and if I have only 1 or 2 links it is on exactly in the center. So this is no go for me, I need UL to really have width of actual LI tags and to exactly specified by width.

If I specify CSS like this:

  .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 UL background is grey only under LI 1 - 3. So I know the size is Ok. But because I had to use float: left style it is automatically aligned to left and ignores div margin: 0 auto style;

If I specify CSS like this:

  .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 as it doesnt work correctly with inline-block;

Is there any solution to this problem? Is the only solution to use diffent tags like table tr td or can anything be done with this ?

Upvotes: 5

Views: 18164

Answers (1)

BoltClock
BoltClock

Reputation: 723729

Is this close enough? No floats, no inline blocks. Just plain ol' blocks and aligns.

.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.

Upvotes: 6

Related Questions