使用左浮动的左对齐项目水平居中列表

Question

I have a div containing several section s. One of the section s contains an ol , and all of its li s are floated left. I am trying to make the ol shrink to contain as many li s as it can on one line, and horizontally center the ol while keeping the li s left-aligned.

Here's what I have: http://jsbin.com/ocokog/1/edit

<div id="wrapper">
 <section id="section">
  <ol id="list">
   <li id="i0"></li>
   <li id="i1"></li>
   <li id="i2"></li>
   <li id="i3"></li>
   <li id="i4"></li>
  </ol>
 </section>
</div>

Non-decorative CSS:

#wrapper {
  width: 85%;
  text-align: center;
}

#section {
  display: inline-block;
}

#list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

#list > li {
  width: 100px;
  height: 100px;
  float: left;
}

When the li s can all fit on one line, the list is centered:

When the li s fall onto a second line, the section and ol grow and the whole thing is left-aligned:

I am trying to make it look like this (depending on the width available, also the section can shrink if necessary):

Setting a width or max width and using margin: auto also doesn't quite work: http://jsbin.com/ocokog/6/edit

Why won't the ol shrink? How can I fix this?

---

These questions are similar but different:

• Centering floating list items <li> inside a div or their <ul> - in the accepted answer, all list items are centered
• Can I center a <ul> with left-aligned <li>s? - each item has its own line

Answer 1

The ol is centered. You've set it to be 65% width. If you look at the orange border when you re-size it, it's always centered.

Edit

Let me try to rephrase this a little. ol is a block element, the same way that a div is a block element. This means that it fills up the space that it is in. This is represented by the orange border in your example. What you want, is for the ol to take up less than 100% of the space. There are many different ways to this, but you always start with the list taking up as much space as it can.

One of the ways is to set the width. The problem with this is that you don't want a fixed width. So you tried setting the width by using percentages. This doesn't work because there are many intervals where a percentage will cause the li to not be centered.

Another method would be to set the left and right margin's of the ol . This works the same as setting the width.

There just isn't a way to center something in an element that you also want to float:left; . I think the confusion comes in because you think that you can make the ol wrap around the li . The problem is, that isn't how the ol works.