如何在 Div 内居中卡片，同时保持左对齐

Question

我目前正在构建一个使用卡片的应用程序。我希望卡片在容器内水平居中，但最后一行应左对齐。 Yummly (http://www.yummly.com/) 等网站在您调整页面大小时实现了这一点。

这是我目前所拥有的，除了我希望蓝色方块在橙色容器内居中对齐，同时保持完全相同的配置：http://jsfiddle.net/s8mfbeyt/13/

.container {
  width: 350px;
  height: 100%;
  background-color: red;
}
ul {
  list-style-type: none;
  padding: 0px;
}
li {
  height: 100px;
  width: 100px;
  background-color: blue;
  display: inline-block;
}

<div class="container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

谢谢！！

Answer 1

有一个相对较新的属性（仍然是部分实验性的）text-align-last

.container {
  width: 350px;
  height: 100%;
  background-color: red;
}
ul {
  list-style-type: none;
  padding: 0px;
  text-align: center;
  -ms-text-align-last: left;
  -webkit-text-align-last: left;
  -moz-text-align-last: left;
  text-align-last: left;
}
li {
  height: 100px;
  width: 100px;
  background-color: blue;
  display: inline-block;
}

<div class="container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

适用于 FF 和 IE（但基于 WebKit 的浏览器目前存在漏洞）

Text-Align-Last @ MDN

Browser Support @ CanIUs.com

Answer 2

你可以通过设置一些 li 填充来得到这个效果。

它们占用宽度，所以最后一个 true li 会被推到左边，但它们的高度为 0，所以视觉上一切正常。

您需要的列数与您的设计所能获得的最大列数一样多，减去 1。

我讨厌设置伪造的 DOM 元素，但它确实有效...

.container {
  width: 350px;
  height: 100%;
  background-color: red;
}
ul {
  list-style-type: none;
  padding: 0px;
  text-align: center;
}
li {
  height: 100px;
  width: 100px;
  background-color: blue;
  display: inline-block;
}
.dummy {
    height: 0px;
}

<div class="container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="dummy"></li>
    <li class="dummy"></li>
  </ul>
</div>

如何在 Div 内居中卡片，同时保持左对齐

How to Center Cards within Div While Maintaining a Left-Align

html

css

alignment