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/

"where I can set which child breaks into a second row" is not demonstrated in your question. How does this work? — Diodeus - James MacFarlane, May 21 '13 at 19:30
I think `li:nth-child(5) { clear: left; }` is what the OP means. — Linus Caldwell, May 21 '13 at 19:32
Yes, exactly. I mean that I want to be able to force a break for one of the child elements. Sorry if it sounded confusing. — Staffan Estberg, May 21 '13 at 19:32
I am wondering how you create the | separator, is it a character (pipe symbol) or a border on a link or item element? Can you post your HTML? — Marc Audet, May 21 '13 at 19:35

score 3 · Accepted Answer · answered May 21 '13 at 19:38

3

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;
}

answered May 21 '13 at 19:38

pzin

4,200
2
28
49

I tried that exact approach on inline elements and it doesn't "clear" the row. But maybe it just needs some tweaking. – Staffan Estberg May 21 '13 at 19:39
Never mind what I said, it does work! http://jsfiddle.net/2LULR/ Must be my other style settings that interfered with it, or I was referencing the element wrong (I'm using LESS). Thanks! – Staffan Estberg May 21 '13 at 19:44

Center multiple row list items with specific amount per row

1 Answers1