居中 <ul> 列表答案

【问题标题】：Center a <ul> list居中 <ul> 列表
【发布时间】：2014-05-28 11:42:24
【问题描述】：

我一直在尝试找到解决此问题的方法，但到目前为止对我没有任何帮助。我希望我能得到一些帮助。

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

这是我正在尝试做的一个说明：

或者，或者（我对任何一种解决方案都可以）：

谢谢。

【问题讨论】：

请发布您尝试过但不起作用的代码。
不看你的代码就很难判断出了什么问题。
@Chris - 另一种选择是使用display: table; + margin: auto。

标签： html css html-lists centering

【解决方案1】：

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

JSfiddle

【讨论】：

【解决方案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; 
}

【讨论】：

谢谢。这使得第二种布局成为可能。不敢相信我错过了这么简单的事情；）

【解决方案3】：

你只需要像这样将ul的显示属性调整为`inline-block'：

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

最后一件事。无序列表有很多可能会导致居中的填充。所以我删除了填充以使其更好地居中。您可能需要调整填充以适应您的需要。

http://jsfiddle.net/k84Rz/

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

【讨论】：

【解决方案4】：

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

Fiddle

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

【讨论】：