居中<ul>列表

Question

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

我正在尝试让一个正常的

<ul>

列表位于页面中心。我一直在考虑解决这个问题的方法是将列表嵌入到 div 中，然后简单地使用

margin: 0 auto;

将 div 居中。 但我的问题是，默认情况下，列表似乎采用其父级的 100% 宽度。 那么如何将实际列表宽度调整为与最长列表项一样长呢？

这是我正在尝试做的事情的说明：

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

谢谢。

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 的显示属性调整为“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;
}

Answer 4

您可以使用

display: table;

+

margin: auto

小提琴

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

Answer 5

要实现类似于第一个插图的效果，请使用

width: fit-contents

来限制列表项的宽度。添加

margin-left: auto

和

margin-right: auto

将项目居中。

li {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}