SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  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,299
    Mentioned
    460 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,299
    Mentioned
    460 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,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    OK, one more question: what are the dimensions of the image?

  7. #7
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by secureboot View Post
    Shouldn't really matter, right?
    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:

    Code:
    <!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. #9
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by secureboot View Post
    That doesn't center the image, and #one spans the whole viewport.
    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. #11
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Experiment

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

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    OK, you just need to make the change in red:

    Code:
    #one {
      height: 475px;
      margin: 0 auto;
      position: relative;
      width: 1024px; /* 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. #13
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's probably possible to account for different image sizes dynamically, but a lot harder.
    Hard?

    Code:
    $(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. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Nice one, lpcstr. 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. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 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
  •