html - 关于 "CSS Centering an Unordered List"的意见

Question

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

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

更准确地说，我们为什么要做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 .