Align text over centered image

HTML & CSS
1

I’m wondering how I can line up text over a centered image.

Let’s say I have an image that I want to center on a page, but have some text over part of the image (let’s say 30px from the bottom, 200px from the right).

How can I accomplish this?

I see how to do absolute positioning on non-centered images, but all the centering methods I’ve tried mean the div surrounding the image spans the whole page, which makes offsets from the sides of the page, not the sides of the image, which is what I’m looking for.

Thoughts? Is this just indicative of bad design (overlaying text on fixed-width images).

2

Hi secureboot. Welcome to SitePoint. :slight_smile:

Let’s say I have an image that I want to center on a page, but have some text over part of the image (let’s say 30px from the bottom, 200px from the right).

How can I accomplish this?

An easy way is to create a div the same size as the image, and place the image on it as a background image. Then place the text in the div as normal, and give the text top and right padding to push it where you want it.

If using position absolute, the trick it to set the container to position: relative, so that the absolute position will then be relative to the container, rather than to the viewport. Positioning is relative to the nearest positioned parent element.

3

I don’t understand how you would use position relative/absolute to accomplish this. It seems like however you parent the image (other than setting width/height), the parent of the image has to be a block element that takes up the whole viewport width. If so, you’re still offsetting the text to the viewport, rather than the image itself.

For instance,

<div id="one" style="position:relative">
	<div id="two" style="text-align: center; position: relative">
		<img src="the_picture.png">
	</div>
	<div id="textdiv" style="position:absolute;left: 20px; top: 20px" id="my_text"; left: 20px; top: 100px">MY TEXT</div>
</div>

This clearly doesn’t work, because the “two” div takes up the whole viewport, as does “one”

4

OK, it’s not hard to do, but I just need to be a bit clearer on how this needs to be laid out. Could you post a simple image of how you want this to appear? It also needs to be in the context of the rest of the page, as that will matter.

5

All I’m looking for is an image, centered in the viewport, with text offset within the picture (anywhere). There’s nothing else on the page except a footer, though if you can mention why it matters, that’s helpful…

If you look at the code snippet I pasted above, I want something that looks like that, but with the text in the image, instead of offset within the viewport.

I don’t have any mocks I can actually share right now though - just looking for a starting point so that I can figure out the correct way to do this. Hoping not to have to use a div background.

6

OK, one more question: what are the dimensions of the image?

7

Shouldn’t really matter, right? Let’s say 1024x457. It’d be awesome if I didn’t have to hardcode that in though, but at this point, I’m looking for anything.

I saw HTML 5 and CSS 3: The Techniques You’ll Soon Be Using | Nettuts+, which does something similar, but using the default (left) alignment for the text, and an image that isn’t centered.

8

Well, it would help a lot. Much easier that way. Here’s an example of how you’d do it if you know the image dimensions:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
#one {position: relative; width: 1024px; height: 457px; margin: 0 auto;}
#textdiv {position: absolute; right: 200px; bottom: 30px}
</style>
</head>

<body>
<div id="one">
    <div><img src="the_picture.png"></div>
    <div id="textdiv">MY TEXT</div>
</div>

</body>
</html>
9

That doesn’t center the image, and #one spans the whole viewport.

I just copy/pasted what you have there, and substituted my image and its dimensions.

I’m using Chrome.

10

If that’s the case, you done something wrong with the code, because my code centers #one and its image in the middle of the screen (in all browsers, with no 100% stretch), and places the text where you first mentioned in your first post. Could you post a link to a working example of what you have?

11

Experiment

Straight copy/paste from what you have above, except image dimensions are changed, and image path is changed

12

OK, you just need to make the change in red:

#one {
  height: 475px;
  margin: 0 auto;
  position: relative;
  width: [COLOR="Red"]1024px[/COLOR]; /* was 1249px */
}

The div was meant to be the same width as the image.

It’s probably possible to account for different image sizes dynamically, but a lot harder.

13

Swear word - I thought the image was 1249.

Yet another good reason to be able to resize dynamically on the image.

Does anyone know how to accomplish that? Seems like that wouldn’t be possible. If it’s inline, absolute positioning doesn’t seem to work correctly, and if it’s a block level element, you’d have to clear it, which means your absolute values would come from the viewport, not the image itself.

14

Hard?


$(function(){
    $("div.centerimage").each(function(){
        var image = $(this).find("img")
        $(this).css("width", image.width())
        $(this).css("height", image.height())
    })
})

Not tested, but thats basically it.

15

Nice one, lpcstr. :slight_smile: I meant hard with CSS, but to be honest, I find JS hard, too! A CSS-only solution might be a bit more reliable, and if I get time, I’ll see what I can dig up later.

16

You cajn do it like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test {
	list-style:none;
	margin:0;
	padding:0;
	text-align:center;
}
.test li {
	margin:20px 0;
}
.test span {
	display:inline-block;
	position:relative
}
.test span b {
	position:absolute;
	bottom:10px;
	right:10px;
	color:#fff;
}
.test img {
	display:block;
	padding:10px;
	background:red;
}
</style>
</head>
<body>
<ul class="test">
	<li><span><img src="images/zimg4.jpg" width="100" height="100" alt="test" /><b>Overlay Text</b></span></li>
	<li><span><img src="images/zimg4.jpg" width="200" height="200" alt="test" /><b>Overlay Text</b></span></li>
	<li><span><img src="images/zimg4.jpg" width="150" height="159" alt="test" /><b>Overlay Text</b></span></li>
	<li><span><img src="images/zimg4.jpg" width="150" height="200" alt="test" /><b>Overlay Text</b></span></li>
	<li><span><img src="images/zimg4.jpg" width="376" height="100" alt="test" /><b>Overlay Text</b></span></li>
	<li><span><img src="images/zimg4.jpg" width="300" height="120" alt="test" /><b>Overlay Text</b></span></li>
	<li><span><img src="images/zimg4.jpg" width="400" height="300" alt="test" /><b>Overlay Text</b></span></li>
	<li><span><img src="images/zimg4.jpg" width="200" height="200" alt="test" /><b>Overlay Text</b></span></li>
	<li><span><img src="images/zimg4.jpg" width="360" height="100" alt="test" /><b>Overlay Text</b></span></li>
</ul>
</body>
</html>

Assuming that was what you wanted :slight_smile: