如何中心卡内的事业部，同时保持左对齐 [英] How to Center Cards within Div While Maintaining a Left-Align

问题描述

我目前正在建设一个应用程序利用卡。我想卡被水平在容器内的中心，但是在最后一行应左对齐。网站如Yummly（ http://www.yummly.com/ ）实现这一目标，当你调整页面。

这是我到目前为止，除了我喜欢蓝色方块为中心，同时保持完全相同的配置中的橙色集装箱对齐：的 http://jsfiddle.net/s8mfbeyt/13/

.container {   宽度：350像素;   高度：100％;   背景颜色：红色; } UL {   列表样式类型：无;   填充：0px; } 李{   高度：100像素;   宽度：100像素;   背景色：蓝色;   显示：inline-block的; }

＆LT; D​​IV CLASS =容器＆GT;   ＆LT; UL＆GT;     ＆LT;李＆GT;＆LT; /李＆GT;     ＆LT;李＆GT;＆LT; /李＆GT;     ＆LT;李＆GT;＆LT; /李＆GT;     ＆LT;李＆GT;＆LT; /李＆GT;     ＆LT;李＆GT;＆LT; /李＆GT;   ＆LT; / UL＆GT; ＆LT; / DIV＆GT;

谢谢！

解决方案

您可以得到这样的效果设置一些利填料。

他们采取宽度，因此，最后的真正的李将被推到左侧，但他们有0高度，以便在视觉上一切正常。

您需要尽可能多的人的列设计可以得到的最大数量减1。

我恨设置假的DOM元素，但它的工作原理...

.container {   宽度：350像素;   高度：100％;   背景颜色：红色; } UL {   列表样式类型：无;   填充：0px;   文本对齐：中心; } 李{   高度：100像素;   宽度：100像素;   背景色：蓝色;   显示：inline-block的; } 。假 {     高度：0px; }

＆LT; D​​IV CLASS =容器＆GT;   ＆LT; UL＆GT;     ＆LT;李＆GT;＆LT; /李＆GT;     ＆LT;李＆GT;＆LT; /李＆GT;     ＆LT;李＆GT;＆LT; /李＆GT;     ＆LT;李＆GT;＆LT; /李＆GT;     ＆LT;李＆GT;＆LT; /李＆GT;     ＆LT;李类=假＆GT;＆LT; /李＆GT;     ＆LT;李类=假＆GT;＆LT; /李＆GT;   ＆LT; / UL＆GT; ＆LT; / DIV＆GT;

I am currently building an app making use of cards. I would like the cards to be centered horizontally within the container, however the last row should be aligned left. Websites such as Yummly (http://www.yummly.com/) achieve this when you resize the page.

This is what I have so far, except I would like the blue squares to be center aligned within the orange container while maintaining the exact same configuration: 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>

Thanks!!

解决方案

You can get this effect setting some li fillers.

They take width, so that the last true li will be pushed to the left, but they have 0 height so visually everything is ok.

You need as many of them as the maximum number of columns that your design can get, minus 1.

I hate setting fake DOM elements, but it works ...

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

这篇关于如何中心卡内的事业部，同时保持左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！