2

我需要关于如何做到这一点的建议，我已经达到了正确的结果。这是一个示例代码。

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

下面的所有ANCHOR对象都DIV #box必须自动对齐，而不会分成DIV块。IntoDIV #box会自动显示那些可以放入其中的项目。排序可能不是有条件的大小，也不是项目的数量。唯一的条件是DIV #box.

例子：

在此处输入图像描述 在此处输入图像描述

主要结构

  • 顺序ANCHOR不得固定指定或仅限于数量；自动居中于下的所有边DIV #box；自动调整图像大小。
  • DIV #box必须水平对齐到下方的中心DIV #wrap，已指定固定的宽度和高度；的全部内容DIV #box必须水平和垂直对齐到中心；不适合该块的所有内容都将自动隐藏。

在此处输入图像描述

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

谢谢回复。

4

1 回答 1

0

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

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

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

因为 HTML 中的元素可以有 2 种类型——块和内联。 [让我们不要在这里详细说明什么是内联块元素和其他类型]

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

在此处输入图像描述

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

在此处输入图像描述

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

jsFiddle中的结果

于 2013-08-07T11:38:36.340 回答