ul与css的动态居中对齐

Question

我从数据库中提取数据，以ul li格式打印。由于数据不同，我们可能有2个项目，或者我们可能有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 Link 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>