css / js - 在图像旁边垂直对齐文本块

时间:2011-05-07 03:29:33

标签: css positioning vertical-alignment

(我问了一个类似的问题here并在某些情况下找到了一个有效的解决方案,但是这个设计困境的参数已经改变了,所以我决定开始一个新的线程)

我正试图找到一种方法 - 通过纯粹的CSS或借助javascript--将多行文本块与图像垂直对齐,如图所示here。如演示中所示,文本块的高度将小于图像的高度,因此我希望它在中间浮动(这是表格布局中的默认值。)我的情况中的一个关键点是能够在没有为包含div定义高度的情况下实现这种效果 - 即仅定义图像高度 - 因为我基本上试图构建一个长缩略图列表,其中包含一个小图像和描述性文本并且需要定义一个每个包含div的高度都会有问题。

对我来说非常了不起的是,通过CSS这么容易实现的东西是如此巨大的事业;以及我通过谷歌发现的无数解决方案,大多数纯CSS方法以及许多JS辅助方法都需要声明容器的高度。此外,方便的“display:table-cell”css方法在IE中不起作用。

我愿意接受任何解决方案,例如。通过jQuery等 - 非常感谢任何帮助;我认为其他人也会从发现这个问题的工作解决方案中受益。

1 个答案:

答案 0 :(得分:1)

这不正是你需要的吗? http://jqueryui.com/demos/position/

修改:工作演示:http://jsfiddle.net/c0mm0n/v4BNQ/1/