如何在仍然与左/右对齐的同时居中文本？

Question

我有一个无序的垂直列表..

 <div>
 <ul>
 <li>home</li>
 <li>portfolio</li>
 <li>about</li>
 <li>contact</li>
 </ul>
 </div>

的CSS：

 div {
 width: 600px;
 }
 ul {
 text-align: center;
 }

我真正想要的是左侧文本对齐的列表，而ul仍然是水平位于中心。有办法吗？

Answer 1

您可以执行以下操作，以动态生成不同宽度的内容：

div { text-align: center; }

ul { display: inline-block; }

li { text-align: left; }

jsFiddle example

或者，您可以在父级上设置已定义的宽度，并使用margin:0px auto，假设它是block级别元素。

ul {
    width: 100px;
    margin: 0px auto;
}

jsFiddle example