html - 以每行特定数量居中多行列表项

Question

我正在尝试创建一个跨越多行的无序列表，该列表始终居中，并且我可以在其中设置哪个孩子进入第二行，例如 -

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

（我将列表设置为清除第五个子元素的第二行）

寻找一个内联显示解决方案来使元素居中，我找不到清除它们的方法，所以我切换回了一个基于浮动的列表。虽然这很容易处理清除，但我发现很难将多行居中 -

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

使用这种样式，一旦创建第二行，列表就会失去中心对齐。
想法？

使用内联方法和 nth-child / after 伪属性解决 - http://jsfiddle.net/2LULR/

Answer 1

要使多个浮动行居中，您必须手动将它们居中。所以我认为最好的解决方案是display: inline通过将父元素设置为具有text-align: center.

为了清除或创建新行，我会做这样的事情：

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