居中<ul>列表</ul>

Question

我一直在努力寻找这个问题的解决方案，但到目前为止我没有任何帮助。我希望能得到一些帮助。

我正在尝试将正常的<ul>列表放在页面的中心位置。我一直在考虑解决这个问题的方法是将列表嵌入div中，然后使用margin: 0 auto;简单地将div居中。 但我的问题是，默认情况下，列表似乎占用其父级的100％宽度。 那么如何将实际列表宽度调整为与最长列表项一样长？

以下是我想要做的事情的说明：

OR，或者（我对任何一种解决方案都没问题）：

感谢。

Answer 1

要将宽度调整为最长的项目，请将display: inline-block;添加到ul元素

JSfiddle

Answer 2

HTML

<h1>title </h1>
<li> list item 1 </li> 
<li> list item item 2 </li> 
<li> list item item item 3 </li> 
<li> list item 4 </li>

和CSS

h1, li{

    text-align:center; 
}

Answer 3

您只需要将ul的显示属性调整为“内联块”，如下所示：

您还必须将ul元素的文本对齐，使其不居中。

最后一件事。无序列表有很多填充可能会使中心失效。所以我删除了填充以使其更好地居中。您可能需要调整填充以满足您的需求。

http://jsfiddle.net/k84Rz/

#centeredDiv {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#centeredDiv ul {
    display: inline-block;
    text-align: left;
    padding: 0;
}

Answer 4

您可以使用display: table; + margin: auto

Fiddle

ul{
    border: 1px solid red;    
    display: table;
    list-style-type: none;
    margin: auto;
}