SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centre align text over an image

    I'm trying to get an image with some text over it to be in the centre of the page (horizontally). The head <div> includes the img (which is correctly centered) and an <h1> with the text but I cant manage to get the text centred...

    Code:
    #head {
        	position: relative;
        	width: 600px;
        	top: 10px;
        	margin-left: auto;
        	margin-right: auto;
        }
        #head h1 {
        	position: absolute;
        	top: -10px;
        	font-size: 32px;
        	color: white;
        	text-align: center;
        }

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #head {
    text-align:center;
    }
    HTML Code:
    <div id="head">
    <h1>My image</h1>
    <img src="myimage.jpg" />
    </div>
    I'm not sure if you really want to use h1 there though...

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to specify the width of the H1 (probably width:100%). As it is now, it's 'shrink-wrapped' so that it is, in fact, centred within its exact width. Put a background colour on it and you'll see what I mean.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! The width: 100% does the biz - cheers!

    The winemaster's suggestion puts one below the other, not what I had in mind.

    The h1's there cos it's the page header.

    Thanks, guys...


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
  •