对"CSS以无序表为中心“的看法

Question

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

相反，我想问它的“为什么”部分。

更准确地说，我们为什么要使用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;
}