vertically centering text within jquery masonry

I am using the jquery masonry to display images. In these images I have script that allows me to roll over and fade-in titles. However I would like them to be perfectly centered within the box. With the Jquery masonry, there is no absolute height value. Is there anyway to position things vertically like you can horizontally (similar to: margin-right: auto; margin-left:auto; clear: both;)

Right now the positio开发者_如何学Pythonning is set 50% from the top, however on smaller elements the titles appear off-center.

Here is a link to my progress: http://geoffjohnsondesign.com/inprogress

Thanks for all of your help!

Geoff

Try this: first thing you want to do is set display: inline-block and position: relative for your containing a:link element (you'll want to assign a specific class to these elements rather than setting this for every single one on a page):

a:link {
    display: inline-block;
    position: relative;
    text-decoration: none;
}

Once you have that, you can then set the vertical margins for your elements.

.thumbnail .caption {
    margin: 50% auto;
    position: absolute;
    text-decoration: none;
    top: 0;
    width: 100%;
}

See if that works.

Quite late but here it goes..

You need to place the caption at 50% but move it upwards by half the size of the caption. For that we use the margin..

So replace the code that is hiding the captions in you jQuery code with

$('.thumbnail .caption')
    .css({ marginTop: function(elem,val){ return $(this).outerHeight()/-2; } })
    .hide();