Css 如何使用表格单元格自动居中分割所有边上的所有对象？

我需要关于如何做到这一点的建议，因为我已经达到了正确的结果。这是一本书

我使用了主属性

table cell

，我到达了垂直居中位置，但没有使用

DIV#box

下的

DIV#wrap

。无论是

锚定还是
垂直定心都不在
DIV#box
下<代码>定位
对象必须自动对齐，而无需指定大小锚定

下的图像可能具有不同的大小

DIV#框

下的所有

ANCHOR

对象必须自动对齐，而不分离为

DIV

块。在

DIV#box

中会自动显示那些可以放入其中的项目。排序不能是条件大小和项数。唯一的条件是

DIV#box

的高度和宽度

例如：

主体结构

• 序列

  锚定

  不得固定、指定或限制为数量；在

  DIV#box

  下自动对中所有侧面；自动调整图像大小

• DIV#box

  必须在

  DIV#wrap

  下与中心水平对齐，并指定了 固定宽度和高度；

  DIV#box

  的全部内容必须在水平和垂直方向上与中心对齐；块中不适合的所有内容都将自动隐藏

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

---

感谢您的响应。

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

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

使用HTML并将小对象包装成组包装和一些CSS

带有负边距的硬编码CSS，每个元素的相对位置

使用jQuery/JavaScript实现同样的功能，但存在大量异常和计算

因为HTML中的元素可以有两种类型-block和inline。 [在这里，我们不必详细说明内联块元素和其他类型是什么]

如果一个元素是block类型，则下一个继续进行的元素将跳转到下一行，但如果该元素是inline类型，则如果行中有空格，则下一个元素将在其旁边对齐。行的高度由最高元素决定，而不是由一组最高元素决定

实现这一目标的唯一方法是将他们分成一个小组

在代码中，这看起来是这样的：

HTML:

---

这真的很难。我怀疑仅仅使用CSS3是不可能的，需要大量的javascript/jQuery。

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

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