How can I place text in the middle of an image vertically?

Question

I'd like to place an blog entry title on an entry thumbnail image vertically aligned to middle.

An image size changes as window size changes and an blog entry title may be more than two lines depending on each blog entries.

I found this web-site that successfully place an text vertically aligned to middle of an image .

On the page below, you see three images with titles.

https://www.hyperisland.com/community

I read the code of the webpage above and try the code below, but it doesn't work as I expect.

This is the code I've got to 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;
}

Could anyone please help me out?

I'm new to CSS and I've been studying hard css lately.

Thanks!

note

As I mentioned earlier, an image size changes as window size changes.
an entry title may more than two lines. it depends on an article.
it needs to be compatible to IE8 as well.
I don't want to treat image as background of div.I want to use img tag in code.

possible duplicate : http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div — Erik Svedin, Aug 23 '14 at 02:51

score 2 · Answer 1 · answered Aug 23 '14 at 03:05

keep your HTML and change your current CSS by this one:

.articleTitle {


position: relative;
  width:400px; height:400px;
}

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;
text-align: center;
position: relative; transform: translateY(-50%); -webkit-transform:translateY(-50%); top:50%; background:rgba(255,255,255,0.5)
}

I've added a semi-transparent background so you can see the effect, but of course you can adjust at will. See it at Codepen

Thank you for your help!! Does "transform" work in IE8? Also, I don't want to set specific width&height size to ".articleTitle" because I want the image size changes as window size changes. I'm making responsive web design layout, so... — W3Q, Aug 23 '14 at 03:13

score 0 · Answer 2 · answered Aug 23 '14 at 03:25

Here's an easy way to do it in modern browsers: http://codepen.io/pageaffairs/pen/qCpse

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.articleTitle {
    display: table;
    position: relative;
    width: 50%; /* adjust to suit, or leave out altogether if you want it to default to the width of the image */
}

.articleTitle {
    display: table;
    position: relative;
}

h1 {
    margin: 0; 
    text-align: center;
}

span {
    position: absolute; 
    top: 50%; 
    left: 0; 
    right: 0; 
    display: inline-block;
    -webkit-transform:translate(0, -50%);
    -moz-transform:translate(0, -50%);
    -ms-transform:translate(0, -50%);
    -o-transform:translate(0, -50%);
    transform:translate(0, -50%);
}

img {
    display: block; 
    width: 100%;
}
</style>
</head>
<body>

<div class="articleTitle">
    <h1 class="title">
        <span>Article title. Artile title. Article Title.Article title.</span>
        <img src="http://placeimg.com/500/500/any" alt="">
    </h1>
</div>

</body>
</html>

Thanks! does it work in ie8? it needs to be ie8 compatible as I mentioned in the post. — W3Q, Aug 23 '14 at 03:43

How can I place text in the middle of an image vertically?

2 Answers2