Question

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

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

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

＆＃13;

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

＆＃13;

谢谢！

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＆amp; IE（但目前基于WebKit的浏览器被窃听）

Text-Align-Last @ MDN

Browser Support @ CanIUs.com

Answer 2

你可以通过这种效果设置一些li填充物。

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

您需要尽可能多的设计可以获得的最大列数减去1.

我讨厌设置假的DOM元素，但它有效......

＆＃13;

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

＆＃13;

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

＆＃13;

如何在保持左对齐的同时将Div中心卡片放入中心

2 个答案: