How to vertically center multi-lined text in fluid responsive thumbnail image?

[mkerny]

I would like to be able to vertically center multi-lined text in a fluid responsive thumbnail image. This thumbnail scales proportionally when the viewport change sizes. As far as the text layer on top of this thumbnail, I would like so it stays perfectly vertically centered as the viewport responds. Note: I used LESS to originally author my CSS and converted it to vanilla CSS for this question therefore I may have messed a thing or two in the conversion process.

**Mockup of desired result:**
http://d.pr/i/SiIr

**Here’s my HTML markup:**

This is an example title spanning multiple lines

By Jon Smith

**CSS:**

article {
width: 100%*(390/1174);
background-color: @color-black;
font-size: 1em;
vertical-align: top;
display: inline-block;
*display: inline;
position: relative;
z-index: 900;
zoom: 1;
line-height: 0em;
}
article:nth-child(2) {
margin-left: 2px; margin-right: 2px;
}
article:nth-child(1), article:nth-child(2) {
margin-bottom: 2px;
}
article a {
display: block;
}
article img {
opacity: .5;
}
article .meta {
position: absolute;
z-index: 500;
top: 0;
bottom: 0 !important;
left: 0;
right: 0;
width: 100%;
height: 20%;
margin: auto;
padding: 0 5%;
color: @color-white;
font-size: 20px;
text-align: center;
}
article .title {
margin: 0;
padding-bottom: 8px;
font-size: 1em;
line-height: 1.15em;
font-weight: 700;
font-weight: bold;
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7);
text-decoration: none;
display: block;
}
article .author {
margin: 0;
font-size: .7em;
line-height: .825em;
font-style: italic;
font-weight: normal;
text-transform: uppercase;
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7);
text-decoration: none;
display: block;
}
article:after {
content: ”;
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}

[CrocoDillon]

Something like: http://www.codepen.io/anon/pen/qGBbD

[mkerny]

Would this work with a fluid image?

[Paulie_D]

Why don’t you try it and report back with any problems.

[Merri]

http://www.codepen.io/Merri/pen/zFrGk

[Author]

Posts