“CSS居中无序列表”的看法

Question

在这个问题中，我不会问如何水平居中一个无序列表，因为互联网上已经有大约十万个资源可以做到这一点。

相反，我想问的是其中的“为什么”部分。

更确切地说，我们为什么要这样做： this

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

不要这样做：

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

当两者都似乎可以解决问题时，有什么想法吗？

- kumarharsh

---

你能在http://jsfiddle.net上创建一个示例吗？ - sandeep

你们 UL 有固定宽度还是动态的？ - sandeep

它们是动态的，具有任意数量的元素... - kumarharsh

Answer 1

由于第一种方法会将 ul 居中，不考虑它拥有多少子元素li，所以这是原因。

第二种解决方案将 ul 向右移动了25％，这在某些特定情况下可以工作，例如

的宽度刚好占总宽度的50％，但在其他情况下则会出现问题。

在父元素使用 left 并在子元素使用 right 是居中具有动态维度（宽度）的子元素的常见做法，这是处理动态内容的情况。

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

在这里查看一个示例代码。

- Christoph

---

嗯...我后来才意识到这一点...25%的技巧只在特定情况下适用。 - kumarharsh

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

- sandeep

---

好的解决方案，但实际上并没有回答问题的“为什么”部分。 - Blowsie

@Christoph，你能描述一下它不起作用的情况吗？这样我们就可以了解新的事情了。 - sandeep

这个方法失败最容易的例子是绝对定位的元素。 - Christoph

可以为这个问题创建一个例子吗？ - sandeep