Question

我想要一个数据网格（表格布局），其元素具有固定的大小。元素应尽可能插入同一行，然后它们应出现在下一行。

我可以使用内联块来做到这一点，但后来我不知道如何控制外部div以使它们居中。

这是我的问题：

probnlem http://images.devs-on.net/Image/QUPPczp4bO6pkKNR-Bereich.png

您是否有任何想法如何使用CSS来解决这个问题？

Answer 1

如果您的块设置为内联块调度，则只需将容器的文本居中：http://jsfiddle.net/Qv6xY/20/（调整结果面板的大小）

html：

<section>
    <article>a</article>
    <article>a</article>
    <article>a</article>
    <article>a</article>
    <article>a</article>
    <article>a</article>
    <article>a</article>
    <article>a</article>
    <article>a</article>
</section>

css：

section{margin:50px; padding:25px; background:#333; text-align:center;}
article{width:50px; height:50px; background:#c00; margin: 10px; display:inline-block}

（或者你还想做更多我想做的事。）

Answer 2

您正在寻找的是在空间内的盒子上进行“完全对齐”的方法。目前还没有办法用纯CSS实现这一目标。你需要在你已经拥有的东西之间做出选择，最后是右边的空间，或者@fabien提供的让你的最后一行居中的东西。

另一种方法是使用一些javascript。

（PS只要你在这些方框中只想要字母“a”，就可能有另一个解决方案，但我认为这是一个占位符，用于更复杂的元素。正确吗？）

CSS将元素填充到网格中（并将它们居中）

2 个答案: