html - 水平居中列表元素，与元素数量无关

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

在你的 ul 中添加 text-align:center;

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;
}

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

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