css - 如何使用表格单元自动将 DIV 所有对象居中？

Question

我需要关于如何做的建议，我已经达到了正确的结果。这是一个sample code .

我使用了达到垂直居中的主要属性table-cell，但不是我在DIV #wrap下居中DIV #box . ANCHOR 均不在 DIV #box 下垂直居中。 ANCHOR 对象必须自动对齐而不指定大小。 ANCHOR 下的图片 可能有不同的尺寸。

DIV #box 下的所有ANCHOR 对象都必须自动对齐，而无需分隔成DIV block 。 DIV #box 中会自动显示适合其中的元素。排序可能不是条件大小，也不是元素数量。唯一的条件是 DIV #box 的高度和宽度。

例子:

主要结构

• Sequence ANCHOR 不得固定指定或限制数量；在 DIV #box 下自动居中；自动调整图片大小。
• DIV #box 必须在 DIV #wrap 下水平居中对齐，指定了一个 固定宽度和高度； DIV #box 的全部内容必须水平和垂直居中对齐；所有不适合该 block 的内容都会自动隐藏。

它也可能是通过 jQuery 的解决方案。

感谢回复。

Answer 1

如果您不允许在额外的 DIV 包装器中进行分离，那么不可能使用可重用的非硬编码代码干净地实现您的结果。

您通过不允许更改 HTML 结构来限制开发选项(可能不是您的错)。 但如果没有限制，那么解决这个问题的方法有多种:

1. 使用 HTML 并将小对象包装成组包装和一些 CSS
2. 带有负边距的硬编码 CSS，每个元素的相对定位
3. 使用 jQuery/JavaScript 实现同样的事情，但有很多异常和计算

因为 HTML 中的元素可以有两种类型 - block 和 inline 。 [我们不在这里讨论内联 block 元素和其他类型的细节]

如果一个元素是 block 类型那么下一个元素会跳到下一行，但是如果元素是内联类型> 那么如果行中有空间，下一个元素将排在它旁边。行的高度由最高元素决定，而不是由一组最高元素决定。

实现这一目标的唯一方法是将它们打包成一个组。

所以在 CODE 中它看起来像这样:

HTML:

<div id="box">
    <a href="#"><img src="" /><p>TEXT</p></a>
    <a href="#"><img src="" /><p>TEXT</p></a>

    <span id="group">
        <a href="#"><img src="" /><p>TEXT</p></a>
        <a href="#"><img src="" /><p>TEXT</p></a>
        <a href="#"><img src="" /><p>TEXT</p></a>
    </span>
</div> 

CSS:

#group {
    display:inline-block;
    vertical-align: middle;
}
#group > :first-child {
   display:block;
}

RESULT in jsFiddle