第二行的HTML中心列表项

使用下面示例中的简单html列表，当列表项目进入第二行时，如何使其居中

<div class="container">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</div>

.container{max-width:500px;}
li{display:block;float:left;background:grey;}

项目1
项目2
项目3
项目4
项目5
项目6
项目4
项目5
项目6

.container{最大宽度：500px；}
li{显示：块；浮动：左；背景：灰色；}

---

当容器收缩并且菜单项开始下降到下面的行中时，我希望它们居中。如何实现这一点？

您必须删除浮动，设置

文本对齐：居中到容器，
内联块
到项目，重置边距/填充并消除元素之间的白色间距

.container {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
    /* float: left; */
    background: grey;
    margin: 0;
}

小提琴：
你是指li项目中的文字吗

.container{max-width:300px;}

li{
  display:block;
  float:left;
  background:grey;
  width: 100px;
  text-align: center;
}

谢谢，现在说得通了是的，左边的浮子是这里的第一个问题，谢谢！