css/js -- 将文本块与图像垂直对齐
（我在此处提出了类似的问题，并在某些情况下找到了可行的解决方案，但是参数因为这个设计困境已经改变，所以我决定开始一个新线程）
我正在尝试找到一种方法 - 通过纯 css 或在 javascript 的帮助下 - 垂直对齐一块图像旁边的多行文本，如此处。如演示中所示，文本块的高度将小于图像的高度，因此我希望它浮动在中间（这是表格布局中的默认设置。）我的情况的一个关键点是能够要实现此效果，无需定义包含 div 的高度 - 即仅定义图像高度 - 因为我基本上试图构建一个长缩略图列表，其中包含小图像和旁边浮动的描述性文本 - 并且需要定义一个每个包含 div 的高度都会有问题。
对我来说，使用表格轻松实现的事情通过 CSS 实现却是一项艰巨的任务，这让我很惊讶。在我通过 google 找到的无数解决方案中，大多数纯 CSS 方法以及许多 JS 辅助的方法都需要声明容器的高度。另外，方便的“display:table-cell”CSS 方法在 IE 中不起作用。
我对这里的任何解决方案持开放态度，例如。通过 jQuery 等——非常感谢您的帮助；我想其他人也会从发现这个问题的有效解决方案中受益。
(I asked a similar question here and found a working solution under certain circumstances, however the parameters for this design quandary have changed, so I've decided to start a new thread)
I'm trying to find a way-- either via pure css or with the help of javascript-- to vertically align a block of multi-line text alongside an image, as depicted here. As shown in the demo, the text block will be smaller in height than that of the image, so I'd like it to float in the middle (as is the default in table layouts.) A key point in my situation is being able to achieve this effect without defining a height for a containing div-- i.e. only defining an image height-- as I'm basically trying to build a long thumbnail list with a small image and descriptive text floated alongside-- and needing to define a height for each containing div would be problematic.
It's remarkable to me that something so easily achieved with tables is such a massive undertaking via CSS; and of the myriad solutions I've found via google, most of the pure-CSS approaches as well as many JS-assisted ones require a declaration of height for the container. Also, the convenient "display:table-cell" css method does not work in IE.
I'm open to any solutions here, eg. via jQuery etc-- thanks much for any help; I would imagine others would benefit from the uncovering of a working solution to this problem as well.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这不正是您所需要的吗？
http://jqueryui.com/demos/position/
编辑：工作演示：http://jsfiddle.net/c0mm0n/v4BNQ/1/
Isn't this exactly what you need ?
http://jqueryui.com/demos/position/
Edit : working demo : http://jsfiddle.net/c0mm0n/v4BNQ/1/