SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align text over centered image

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi secureboot. Welcome to SitePoint.

    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. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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,

    Code:
    <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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    OK, one more question: what are the dimensions of the image?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You cajn do it like this:

    Code:
    <!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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •