I have a div with a ul inside, with the li's set to display inline-block. I want li's to be centered inside the div, regardless of the number of li's, as that will vary, so I don't want to float left or right.

I have this working in everything but IE. In IE8, they initially weren't even displaying as inline blocks (I don't know why, as I understood inline-block was supported in IE8), and I found an odd string of css to add, which gets the inline-block working, but the li's are still not centering. The code I'm using is below. What am I missing? Thanks in advance.

.columns-div {
  width:376px;
  display:block;
  margin:-12px 0 24px 0;
  text-align:center;
}
.columns-ul {
  width:376px;
  padding:12px 0 0 0;
  margin:0;
  text-align:center;
}
.columns-ul li {
  display:inline-block;
  width:23%;
  list-style:none;
  text-align: center;
  zoom:1; *display: inline; _height: 80px;
}



<div class="columns-div">
  <ul class="columns-ul">
    <li>stuff</li>
    <li>stuff</li>
    <li>stuff</li>
    <li>stuff</li>
  </ul>
  <div style="clear"><!--|--></div>
</div>

Update: Here is a screenshot to show the problem in IE. The top image shows how I want the li's to display (the li contains the image, text and link), and it displays correctly in FF and Chrome. The bottom image shows the IE rendering, with the li's off to the left.

screenshot

Update: Removing the ul's specified width and adding auto to the margin didn't fix the problem. I also tried reducing the width to 206, and that didn't work, but it gave me more information as to what's happening. IE is centering the ul inside the div, and it looks like it may even be centering the li's as well. The problem is that there are two additional li's which are empty, and IE is ignoring my CSS and jQuery that tell it not to render these empty tags.

.columns-ul li:empty{
  width:0;
}


 <script>$("li:empty").css({width: '0'});</script>

So, the end result/problem is the same, but the cause is not what I first thought.

  • I couldn't reproduce your problem in IE8. In fact, I couldn't reproduce the problem anywhere. It looked like the li's were centering in every browser, including IE 6, 7, and 8. Maybe I misunderstood. Do you want the li's themselves to be centered in their larger container? Or are you just happy with the text itself being centered? sdleihssirhc almost 6 years ago
  • Yes, I want the li block elements themselves centered inside the div (or the ul, same difference), in addition to the text being centered inside the li. Daniel almost 6 years ago
  • I've added screenshot comparisons of FF and IE above, to illustrate the problem. Thanks! Daniel almost 6 years ago
  • I'm unable to reproduce your problem as well with your HTML. It is likely that IE is not centering because your UL is the same width as your div. Try setting your UL to margin: 0 auto; and a smaller width for testing purposes. Trevor Landau almost 6 years ago
  • It looks like the centering issue isn't really a centering issue, but an issue with IE hiding empty li's. I've updated the question above. Daniel almost 6 years ago

2 answers

Daniel 0
0
points
This was chosen as the best answer

Oh brother.... All I needed was to check if the page was loaded before running the jQuery to hide the empty li's...

  <script type="text/javascript">
    $(document).ready(function(){
    $("li:empty").css({width: '0'});
    });
  </script>

The above works fine. Sorry for all the hassle for something so simple.

Answered almost 6 years ago by Daniel
Sisira 95
0
points

I think you just need to change style class as follows

.columns-ul { / width:376px;/ padding:12px 0 0 0; margin:0 auto; text-align:center; }

Answered almost 6 years ago by Sisira
  • That would have worked, but it turns out that's not even what was causing the problem - the problem is that IE is refusing to collapse my empty li's, while all other browsers do. Daniel almost 6 years ago