Vertically centering an img inside a link inside a figure, with css - css

Question

So I'm trying to customize a slider that came in my wordpress theme with CSS. Right now, it displays three post thumbnails side by side. Unfortunately my featured images all have different aspect ratios, so I'm trying to create a kind of letterbox effect by giving the div that contains the image a fixed size (202px by 138 px) and a black background, and then centering the image within the div.
This is what I want it to look like:
Right now, all my images are aligned with the top of their container, so it looks like the shortest/fattest image just has a black bar at the bottom.
This is what it looks like right now:
I'm SO close. I've read up on vertical-align (I've already seen that "How Not to Vertically center Content" blog post [which I can't link to because of my awful reputation], which was useful and informative but didn't solve my problem), but at this point I'm just stuck.
My html looks something like this:
<ul class="slider">
<li>
<figure class="slide-image">
<a href="blogposturl">
<img src="blogimage" />
</a>
</figure>
//and then some other stuff//
</li>
</ul>
And then there's the CSS! My CSS looks like this right now:
.slider {
position: relative;
}
.slider li {
position: absolute;
}
figure.slide-image {
border-radius: 0px;
width: 202px;
height: 138px;
position: absolute;
background-color: #000;
}
.slide-image img {
border-radius: 0px;
position: absolute;
left: 0;
max-width: 202px;
top: 50%;
margin-top: -69px;
}
I basically followed phrogz's instructions. And yet, my image is still sitting there happily at the top of its container. I think the problem is that the image is inside a link tag? Or maybe it has to do with the container? I don't know. Can anyone help me?

Answer 1

I removed some of the absolute positioning on the img. Try this approach instead:
It uses display:table-cell, and vertical-align:middle for vertical centering.
Working example here - as you can see, it works for varying heights. I didn't change any HTML either.
figure.slide-image a {
display: table-cell;
vertical-align: middle;
height: 138px;
}
.slide-image img {
border-radius: 0px;
max-width: 202px;
vertical-align: middle;
}