css - 将具有 display:inline-block 集的容器居中

Question

嗨，我有一个容器，其中将添加多个元素，所以我真的不知道容器的宽度是多少，因为元素是动态添加的。我需要这个容器居中，所以我认为我应该使用 display :inline-block 使 div 的宽度和高度根据它的元素进行设置，但是在我使用它之后，属性 margin:0 auto 不再起作用。这是我试图实现的一个简单示例：

<div> 
      <ul>
           <li>All</li>
           <li>Web Design</li>
      </ul>
</div>


div{
      display:inline-block;
      margin:0 auto;
}

无论该容器中有多少元素，我都希望它居中。我当前的尝试不起作用，那么我该如何居中这个容器？

Answer 1

添加text-align: center到 CSS。

Answer 2

您可以通过添加具有显示块并对其进行设置的包装器 divtext-align:center来实现：

<div id="wrapper">
    <div> 
      <ul>
           <li>All</li>
           <li>Web Design</li>
      </ul>
</div>
</div>​

div#wrapper{
    text-align:center; 
    display:block;    
}
div{
      display:inline-block;
      margin:0 auto;
}​

看到这个小提琴。

Answer 3

div{
      display:inline-block;
      margin:0 auto;
      text-align: center
}