Question

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

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

DIV #box下的所有DIV #box个对象必须自动对齐，而不会与ANCHOR块分开。进入DIV #box会自动显示那些可以放在那里的物品。排序可能不是条件大小，也不是项目数。唯一的条件是DIV #box的高度和宽度。

示例：

enter image description here

主要结构

序列DIV #wrap不得指定或限制为数字;自动居中于DIV #box下的所有方面;自动调整图像大小。
{{1}}必须水平对齐{{1}}下的中心，指定了一个固定宽度和高度; {{1}}的全部内容必须在水平和垂直方向与中心对齐;所有不适合该块的内容都将被自动隐藏。

enter image description here

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

感谢分享。

Answer 1

如果您不允许在其他DIV包装中进行分离，那么不可能可以干净利落地获得您的结果并使用可重复使用的非硬编码代码。

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

使用HTML并将小对象包装到组包装和一些CSS
具有负边距的硬编码CSS，每个元素的相对定位
使用jQuery / JavaScript实现相同的功能，但有许多异常和计算

因为HTML中的元素可以是两种类型 - 阻止和内嵌。 [我们暂不讨论内联块元素和其他类型的具体内容]

如果元素是块类型，那么下一个前进元素将跳转到下一行，但如果该元素的类型为内联如果行中有空格，则下一个元素将在它旁边排列。行的高度由最高元素决定，而不是由一组最高元素决定。

enter image description here

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

enter image description here

所以在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

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

1 个答案: