Question

First, I’ll start off by saying that I do not have control over the HTML and this is what the HTML looks like:

<ul class="orbit-bullets">
  <li>1</li>
  <li>2</li>
</ul>

Second note I’ll put is that I wouldn’t mind using inline-block, but I need a fallback for non-supportive browsers.

I am trying to center the list. The list items must display inline but they must be block elements because I’m declaring a width, height and text-indent. So I know that I can use display:block; float:left;, but I would like the elements to be centered. And sometimes there are three list items or four or more, so I do not want to set a fixed width on the unordered list smaller than 500px. If I set the width to 500px, when there are just two or three list items, they appear very off centered.

I need to center the list items themselves within the unordered list while still using display:block; float:left;.
Or is there a way to have a variable width on the unordered list while still having it centered? I’m up to any suggestions.

Thanks.

Answer 1

Try this one – http://jsfiddle.net/jD6yp/

ul {
    width: 500px;
    text-align: center;
    background: beige;
}

li {
    display: inline-block;

    zoom: 1;          /* for old IE-s */
    *display: inline; /* for old IE-s */

    padding: 10px;
    margin: 20px;
    border: 1px solid pink;
}