How can I vertically align a blog entry title on an entry thumbnail image? The image size changes with the window size and the title varies in length for each entry.
After finding a website that successfully achieved this effect, I tried replicating it using the code below, but it didn't work as expected.
Check out the example of what I'm trying to achieve at
This is the code snippet I've worked on so far:
http://codepen.io/anon/pen/kFwAH
HTML
<html lang="ja">
<head>
</head>
<body>
<div class="articleTitle">
<h1 class="title"><span>Article title. Artile title. Article Title.Article title.</span></h1>
<img src="http://placeimg.com/500/500/any" alt="">
</div>
</body>
</html>
CSS
.articleTitle {
background: #eee;
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1;
max-width:100%;
}
h1 {
line-height: 1;
z-index: 2;
position: relative;
height: 100%;
text-align: center;
vertical-align: middle;
}
h1:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
h1 span {
display: inline-block;
vertical-align: middle;
}
If you have any suggestions or solutions, please help me out. I'm new to CSS and eager to learn.
Thank you!
Note
- The image size adjusts based on the window size.
- The entry title can span more than two lines depending on the article content.
- Compatibility with IE8 is required.
- I prefer using the <img> tag instead of treating the image as a background of a div.