你如何在一个以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

可能是,你想要这个.看看演示

为了实现你想要的,你必须给display: table;你的div.

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

ul {
  text-align: left;
}

Answer 2

只需添加

ul {
  text-align: left;
}