Can I center a <div> over an <img> vertically and variably?

Here's some HTML:

<div class="float">
    <img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
    <img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
    <img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>

And that is all aligned along the side of the page using this CSS:

div.float
{
    border-right: 1px solid orange;
    position: absolute;
    z-index: 2;
    margin-left: 5px;
    margin开发者_JAVA技巧-top: 5px;
    float: left;
    width: 200px;
}

div.mask
{
    position: relative;
    z-index: 1;
    margin-top: 5px;
    float: left;
    width: 206px;
    height: 805px;
    background-color: white;
}

img.left
{
    z-index: inherit;
    margin-bottom: 3px;
    float: left;
    width: 200px; 
    min-height: 200px; /* for modern browsers */
    height: auto !important; /* for modern browsers */
    height: 200px; /* for IE5.x and IE6 */
    opacity: 0.4;
    filter: alpha(opacity=40);
}

img.left:hover
{
    opacity: 1;
}

Basically, what this does is put a column of pictures on the left side of the page. No big deal. However, I need each of those pictures, which are album covers, to have album titles. The way these album titles look are as such: an orange rectangle with white text. This is then vertically centered over the img. The problem is that each image has a different height, so I need to align these titles specific to the img.

Also, as an add-on, I have created a gradient that causes the top of the first image to fade into white and the bottom of the last image to fade into white. When you hover over the fade, the images will begin to scroll using jquery. The problem here is that I can not get these gradients to stay in their fixed locations and cut off the bottoms and tops of images when the page is resized. I will attach images of how it looks.

Yet another issue, the albumTitle should be at 90% opacity. The image should be at 40% opacity. Hovering over the image should change the image to 100% opacity and the albumTitle to 30% opacity. Hovering over the albumTitle should have the same effect. I do not know how to fix this either.

---

For the first part: you can center the titles dynamically using jQuery.

http://jsfiddle.net/p7GzB/6/

Without jQuery you would probably have to use container divs, and a cross-browser solution for the vertically centered titles.