UL tag not centering with margin: 0 auto; css style
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;
}
feronovak
Updated on June 04, 2022Comments
-
feronovak almost 2 years
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 ?
-
feronovak over 13 yearsLI is under each other. It is centered but not side by side
-
BoltClock over 13 years@fnovak: Your last snippet was what I was trying to base my code on, maybe I read it wrongly. I think I know what you're trying to achieve now; give me a few minutes to try again.
-
feronovak over 13 yearsI have added this to LI: display: inline; margin: 2px;