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.
2 answers
solution1
2 2014-08-23 03:05:34
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
solution2
0 2014-08-23 03:25:56
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.