1

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

Community
  • 1
  • 1
nickpish
  • 839
  • 4
  • 24
  • 43

1 Answers1

1

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

Edit : working demo : http://jsfiddle.net/c0mm0n/v4BNQ/1/

c0mm0n
  • 969
  • 6
  • 6
  • thanks for the response c0mm0n, I'm just not quite understanding how to use this utility... – nickpish May 07 '11 at 03:50
  • I try to fiddle it, looks basic, maybe I missed something :) – c0mm0n May 07 '11 at 03:59
  • it's kind of mind-boggling how seemingly difficult it is to find a reliable cross-browser solution to this problem... I haven't used tables in a *very* long time, but it's very tempting in this situation given that it'd take 30 seconds – nickpish May 07 '11 at 04:05
  • There you go, I edited my reply with demo. Not that tricky as i assumed. Probably could be done even better. But working. You can change text content in html, or image height in css, this will still be centered. – c0mm0n May 07 '11 at 04:19
  • nice! ok thanks much for giving me a basic framework to work with; much appreciated – nickpish May 07 '11 at 05:07