中心列表元素水平独立于元素数量

Question

我希望将一系列未知数量的列表元素集中在一起。

这是一个基本的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>

和CSS：

 ul {
  width: 100%;
 }

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

和一个JSFiddle：

https://jsfiddle.net/ea37r9mr/

Answer 1

在ngFor

中添加text-align:center;

＆＃13;

＆＃13;

ul

＆＃13;

ul {
  width: 100%;
  text-align: center;
  border: 2px solid #222222;
  padding: 0;
}

li {
  width:10%;
  list-style: none;
  display: inline-block;
  padding: 0.5em 1em;
  border: 2px solid #222222;
  margin: 5px 0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

像这样：

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

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

以下是我添加text-align后编辑的JSfiddle，以便您可以直观地看到更改。

希望这有帮助！

Answer 3

经典的方法是使用text-align: center的课程，但是对于语义目的我想要包含一个更令人满意的解决方案。

Use flexbox to go for exact horizontal和垂直样式

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

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

Answer 4

我已在下面找到了答案，这涉及使用基本代码HTML5＆amp; CSS3构成所需的代码：

＆＃13;

＆＃13;

ul {
  width: 580px;
  margin: auto;
  text-align: center;
  padding: 4px;
  border: 2px solid black;
 }

li {
  margin: auto;
  text-align: center;
  display: inline-block;
  list-style: none;
  padding: 8px;
  border: 2px solid black;
  width: 80px;
 }

＆＃13;

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

<br>

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

＆＃13;

＆＃13;

＆＃13;