Question

使用下面示例中的简单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;}

http://jsfiddle.net/hzazvwte/

当容器缩小并且菜单项开始落入下面的行时，我希望它们居中。我怎样才能做到这一点？

Answer 1

你必须移除浮动，将text-align: center;设置为容器，inline-block设置为项目，重置边距/填充并消除元素之间的白色间距。

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

小提琴：http://jsfiddle.net/hzazvwte/4/

Answer 2

你的意思是李项目中的文字？

.container{max-width:300px;}

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

第二行的HTML中心列表项

2 个答案: