ul与css的动态居中对齐

Question

我正在从以 ul li 格式打印的数据库中提取数据。由于数据不同，我们可能有 2 个 li 项目，或者我们可能有 10 个谁知道。

居中 ul 或宽度会发生变化的 div 的最佳方法是什么？我知道将 div 或 ul 居中，我会使用以下内容：

#name, ul {
 width:200px; /*set certain width */
 margin:0 auto; /* center div */
 display:block /* play friendly with the existing layout */
}

我的问题是 div 可能是 200px 或超过 200px 的数据，因此它不会真正居中，因为 div 中心对齐是基于宽度的。

任何帮助将不胜感激。

Answer 1

在这里，您可以将具有动态内容长度的ul 居中。

您可以将ul 包装在一个 div 中，并将该 DIV 上的 CSS 属性设置为

.wrapper{
  display:table;
  margin: 0 auto;
}

这将在div 中居中对齐ul 而与div 的宽度无关，您可以在下面看到一个示例：

Codepen 链接http://codepen.io/nadirlaskar/pen/RKbBpM

.wrapper{
  display:table;
  margin: 0 auto;
  background-color:yellow;
}

ul{
  background-color:red;
}

li{
  background-color:blue;
}

<div class="wrapper">
  <ul>
    <li>Item 1</li>
    <li>Item 2  is now large</li>  
  </ul>  
</div>