css/js-在图像旁边垂直对齐文本块 [英] css/js -- vertically aligning text-block alongside an image

问题描述

(我在此处提出了类似的问题，并在某些情况下找到了可行的解决方案，但是此设计难题的参数已更改，因此我决定启动一个新线程)

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

我正在尝试找到一种方法-通过纯CSS或在javascript的帮助下-将多行文本块与图像垂直对齐，如 此处 .如演示中所示，文本块的高度将小于图像的高度，因此我希望它浮动在中间(这是表格布局中的默认设置.)在不定义包含div的高度的情况下(即仅定义图像的高度)来实现此效果，因为我基本上是在尝试建立一个长的缩略图列表，其中包含一个小图像和浮动的说明文字，并且需要定义一个每个包含div的高度都会有问题.

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.

对我而言，值得注意的是，通过表如此轻松地实现的事情是通过CSS进行的如此庞大的工作；在通过Google找到的众多解决方案中，大多数纯CSS方法以及许多JS辅助方法都需要声明容器的高度.另外，便捷的"display:table-cell" css方法在IE中不起作用.

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.

例如，我愿意接受任何解决方案.通过jQuery等-非常感谢您的帮助；我想其他人也将从发现该问题的可行解决方案中受益.

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.

推荐答案

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

Isn't this exactly what you need ? http://jqueryui.com/demos/position/

编辑:工作演示: http://jsfiddle.net/c0mm0n /v4BNQ/1/

这篇关于css/js-在图像旁边垂直对齐文本块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！