How can I get text centered vertically on an image? I already made a setup on how it should look but I can't get the text to be centered on every image because they have different heights.
I have already tried using the "top" property and vertical-align and methods mentioned in other questions but nothing seems to work for this situation.
Is there anyway this can be achieved?
The JSfiddle can be found here: http://jsfiddle.net/Sf3RX/2/
HTML
<div class="column">
<div class="image">
<img src="/">
<p class="info">cats
<br><span>#Photography</span>
</p>
</div>
CSS
.image {
position: relative;
width: 25%;
text-align: center;
}
img {
width: 100%;
}
p.info {
position: absolute;
width: 100%;
z-index: 10;
top: 25%;
}