Question

在这个问题中，我不会问“如何”将无序列表水平居中，因为互联网上已有大约11万个资源。

相反，我想问一下“为什么”这一部分。

更确切地说，我们为什么要this

ul {
   position:relative;
   left:50%;
}
ul > li {
   position:relative;
   right: 50%;
}

而不是：

ul {
   position:relative;
   left:25%;
}

当两者似乎都在做伎俩时。有什么想法吗？

Answer 1

原因是，因为第一种方法在每种情况下都以ul为中心 - 独立于它有多少个li。

第二个解决方案将ul 25％置于右侧，这将在一个非常特殊的情况下工作，当li的宽度恰好占据总宽度的50％但是休息时在任何其他情况下。

在父级上使用left，在孩子上使用right是一种非常常见的做法，可以让孩子在动态尺寸（宽度）中居中，这是处理时的情况动态内容。

在某些情况下，text-align:center;也有效，但在必须使用绝对定位时会失败。

查看example fiddle here。

Answer 2

我没有使用任何这些解决方案。请检查此http://jsfiddle.net/yz7jF/。

像这样写：

ul {
   display:inline-block;
   *display:inline;/*For IE7*/
   *zoom:1;/*For IE7*/
}
li{
    float:left;
    text-align:left;
}
.anyParent{
    text-align:center;
}

关于“CSS中心无序列表”的意见

2 个答案: