Center multiple row list items with specific amount per row

Question

I'm trying to create an unordered list spanning over multiple rows that is always centered and where I can set which child breaks into a second row, for example -

    link | link | link | link
link | link | link | link | link

(where I set the list to clear for a second row on the fifth child element)

Going for an inline display solution to center the elements, I couldn't find a way of clearing them so I switched back to having a float based list. While this easily handles clearing, I find it difficult to center multiple rows -

.container {
    width: 100%;
    overflow: hidden;
}
ul {
    list-style: none;
    position: relative;
    float: left;
    display: block;
    left: 50%;
}
li {
    position: relative;
    float: left;
    display: block;
    right: 50%;
}
li:nth-child(5) {
    clear: left;
}

With this style, the list loses center alignment as soon as a second row is made.
Ideas?

Solved using inline approach and nth-child / after pseudo attributes - http://jsfiddle.net/2LULR/

Answer 1

To center multiple floats rows you have to center them manually. So I think the best solution is using display: inline and center them by setting the parent element to have a text-align: center.

And to clear or make a new row, I would do something like this:

li:nth-child(5):after {
  content: "";
  display: block;
}