html - Center multiple row list items with specific amount per row -

i'm trying create unordered list spanning on multiple rows centered , can set child breaks second row, example -

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

(where set list clear second row on fifth child element)

going inline display solution center elements, couldn't find way of clearing them switched having float based list. while handles clearing, find difficult 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 style, list loses center alignment second row made.
ideas?

solved using inline approach , nth-child / after pseudo attributes - http://jsfiddle.net/2lulr/

to center multiple floats rows have center them manually. think best solution using display: inline , center them setting parent element have text-align: center.

and clear or make new row, this:

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