html - 如何在 div 居中的无序列表中左对齐列表项？

Question

我在一个 div 中的一个 div 中有一个 div:

<div id="wrapper" class="center">
    <div id="content" class="center">
        <div id="listDiv" class="center">
           <ul>
               <li><a href='#' id="1" >Link one</a> </li>
               <li><a href='#' id="2" >Link 2</a> </li>
               <li><a href='#' id="3" >Link three</a> </li>
           </ul>
        </div>
    </div>
</div>

在我的样式表中，我有一个类将页面中的每个 div 居中，并将 div 中的内容居中:

div.center{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

我希望我的无序列表在 div 中保持居中，但每个列表项都在另一个下方对齐。我尝试过的一切都将列表项彼此居中。我错过了什么？

Answer 1

也许，你想要这个。 <强> SEE THE DEMO

要实现你想要的，你必须给你的 div display: table;。

div.center {
  margin-left: auto;
  margin-right: auto;
  display: table;
}

ul {
  text-align: left;
}