Html 水平居中列出元素，与元素数量无关

我正在寻找一系列未知数量的列表元素的中心

下面是一个基本的html：

<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 <li>item 4</li>
 <li>item 5</li>
 </ul>

 <ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
 <li>item 4</li>
 </ul>

和一个JSFiddle：

---

添加

文本对齐：居中在您的
ul


ul{
宽度：100%；
文本对齐：居中；
边框：2倍实心#22222；
填充：0；
}
李{
宽度：10%；
列表样式：无；
显示：内联块；
填充物：0.5em 1em；
边框：2倍实心#22222；
保证金：5px0；
}

项目1
项目2
项目3
项目4


项目1
项目2
项目3
项目4
项目5
添加
文本对齐：居中在您的
ul


ul{
宽度：100%；
文本对齐：居中；
边框：2倍实心#22222；
填充：0；
}
李{
宽度：10%；
列表样式：无；
显示：内联块；
填充物：0.5em 1em；
边框：2倍实心#22222；
保证金：5px0；
}

项目1
项目2
项目3
项目4


项目1
项目2
项目3
项目4
项目5
经典的方法当然是使用
文本对齐：居中
，但出于语义目的，我想包括一个更令人满意的解决方案

和垂直样式

ul {
  width: 100%;
  background-color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
}

li {
  list-style: none;
  display: inline-block;
  padding: 1em;
}

当然，经典的方法是使用
text align:center
，但出于语义目的，我想包括一个更令人满意的解决方案

和垂直样式

ul {
  width: 100%;
  background-color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
}

li {
  list-style: none;
  display: inline-block;
  padding: 1em;
}

使用您提供的JSFIDLE，只需将
text align:center
添加到
ul
元素中

像这样：

ul {
    width: 100%;
    background-color: gray;
    text-align: center;
}

li {
    list-style: none;
    display: inline-block;
    padding: 1em;
}

这是我用添加的
text align
编辑的，以便您可以直观地看到更改

希望这有帮助
 使用您提供的JSFIDLE，只需将
text align:center
添加到
ul
元素中即可

像这样：

ul {
    width: 100%;
    background-color: gray;
    text-align: center;
}

li {
    list-style: none;
    display: inline-block;
    padding: 1em;
}

这是我用添加的
text align
编辑的，以便您可以直观地看到更改

希望这有帮助
 我已经为您找到了下面的答案，这涉及到使用基本代码HTML5和CSS3来形成所需的代码：


ul{
宽度：580px；
保证金：自动；
文本对齐：居中；
填充：4px；
边框：2件纯黑；
}
李{
保证金：自动；
文本对齐：居中；
显示：内联块；
列表样式：无；
填充：8px；
边框：2件纯黑；
宽度：80px；
}

项目1
项目2
项目3
项目4




项目1
项目2
项目3
项目4
项目5
我已经为您找到了下面的答案，这涉及到使用基本代码HTML5和CSS3来形成所需的代码：


ul{
宽度：580px；
保证金：自动；
文本对齐：居中；
填充：4px；
边框：2件纯黑；
}
李{
保证金：自动；
文本对齐：居中；
显示：内联块；
列表样式：无；
填充：8px；
边框：2件纯黑；
宽度：80px；
}

项目1
项目2
项目3
项目4




项目1
项目2
项目3
项目4
项目5
/me看着图像。居中？@PeeHaa是输入的。您的li既不是水平输入的，也不是图像中的居中。将文本对齐：居中添加到您的ul标签，它将完成/me查看图像。居中？@PeeHaa是输入的。您的li既不是水平输入的，也不是图像中的居中。将文本对齐：居中添加到您的ul标签，即可完成