CSS居中内容，向左浮动并有多行

debugcn 发表于 Dev

乔恩

我有一个展示产品的网站。我希望产品能在设置的宽度和边距允许的范围内尽可能多地排成一行。我希望它使项目向左浮动（至少使最后一个项目向左浮动），但是我也希望它们居中。

代码（小提琴）：

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
li {
  list-style-type: none;
  float: left;
  width: 150px;
  height: 150px;
  margin: 20px;
  padding: 3px;
  background: #CCCCCC;
  text-align: center;
}
li img {
  max-width: 144px;
}

<ul>
  <li><img src="" /></li>
  <li><img src="" /></li>
  <li><img src="" /></li>
</ul>
<ul>
  <li><img src="" /></li>
  <li><img src="" /></li>
  <li><img src="" /></li>
</ul>
<ul>
  <li><img src="" /></li>
  <li><img src="" /></li>
  <li><img src="" /></li>
  <li><img src="" /></li>
</ul>

如jsfiddle所示，这实际上是我想要的，但是希望产品（由方框表示）也可以在页面中居中。

您可以尝试display: inline-block代替float: left：

ul {
  text-align: center;
}
li {
  display: inline-block;
}

ul {
  margin: 0px;
  padding: 0px;
  text-align: center;
}
li {
  display: inline-block;
  width: 150px;
  height: 150px;
  margin: 20px;
  padding: 3px;
  background: #CCCCCC;
}
li img {
  max-width: 144px;
}

<ul>
  <li><img src="" /></li>
  <li><img src="" /></li>
  <li><img src="" /></li>
</ul>
<ul>
  <li><img src="" /></li>
  <li><img src="" /></li>
  <li><img src="" /></li>
</ul>
<ul>
  <li><img src="" /></li>
  <li><img src="" /></li>
  <li><img src="" /></li>
  <li><img src="" /></li>
</ul>