CODEWITHSUNDEEP
htmlcss
W3Q
W3Q

Reputation: 909

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

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

Upvotes: 0

Views: 140

Answers (2)

ralph.m
ralph.m

Reputation: 14345

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>

Upvotes: 0

Devin
Devin

Reputation: 7720

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

Upvotes: 2

Related Questions