html - 行ごとに特定の量を持つ複数の行リスト項目を中央に配置する

Question

複数の行にまたがる順序付けられていないリストを作成しようとしています。これは常に中央に配置され、どの子が 2 行目に分割されるかを設定できます。たとえば、-

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

(ここでは、5 番目の子要素の 2 行目にリストをクリアするように設定しています)

要素を中央に配置するインライン表示ソリューションを探していましたが、それらをクリアする方法が見つからなかったため、フロートベースのリストに戻しました。これはクリアを簡単に処理しますが、複数の行を中央に配置するのは難しいと思います-

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

このスタイルでは、2 行目が作成されるとすぐにリストの中央揃えが失われます。
アイデア？

インラインアプローチとnth-child /疑似属性の後を使用して解決 - http://jsfiddle.net/2LULR/