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

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 示例

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

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

jsFiddle 示例