How to vertically align images in the imagebit?

[sydude]

When browsing thumbnails, how can I get just the images to be vertically centered in each cell, without having the additional info be centered as well?

I think I'm in right place, but 'valign' or 'vertical-align:' don't seem to work. Any ideas?

Here's the vBgallery code I'm working with (unmodified):

<td class="alt1" valign="bottom" width="$cellwidth">
<if condition="$images['sticky']">
<div align="$stylevar[right]"><img alt="" class="inlineimg" src="$stylevar[imgdir_misc]/sticky.gif" title="$vbphrase[sticky_image]" /></div>
</if>
<div align="center" style="margin-top:5px;margin-bottom:5px">
<a href="showimage.php?$session[sessionurl]i=$images[imageid]$adv_sorturl"><img alt="$images[title]" border="0" src="$images[url]" /></a>
</div>

[Luciano]

Well vertically centering images is a bummer...
officially with css standards there are 2 methods..
Understanding vertical-align, or "How (Not) To Vertically Center Content"

but in this case it is more difficult because you

• you do not know the height of the image
• you do not know the height of the info box (they are NOT all the same as title, description, exif can vary in length!!!)

there is a method I once tried it worked nicely in firefox 3 but messed up in firefox 2 and ie 7.. though it did work in ie 8

but it required a complete rewrite of the imagebit dropping tables.. so you will never be able to upgrade anymore..

the easiest way to do it would be to calculate the height if each thumbnail when constructing the imagebit.. and then position it absolutely with css

You can also consider that the height of a thumbnail will never exceed the defined thumbnail height, this works for portrait type images, but the landscape type images that are wider than high are mispositioned..

---------------
Another method that works is adding another table inside the td of the imagebit..
(but we want to get rid of tables!!!!)

example :

now we have:

Content visible to verified customers only.

if you make :

Content visible to verified customers only.

it would somewhat work as long as your info-boxes are the same height..

-------

What i did to solve the problem, I used square thumbnails, all being the same height, you do not have the problem anymore..

I posted the hack here some time ago.. check the screenshots at the bottom of the post...
http://www.photopost.com/forum/vbgal...sharpener.html

Luc

[sydude]

Thank you very very much. I will likely go the table ( ) route!