SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot daemon's Avatar
    Join Date
    Apr 2001
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center image in XHML page

    Hello folks,

    all I wanna do is put a small image right in the middle (horizontally and vertically) of the screen. (using a xhtml page WITHOUT tables).
    Can anyone post how the code should look like?

    THanks

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <html>
    <head>
    </head>
    <body style="background: 
    url(
    [url]http://www.google.com/images/logo.gif[/url]
    ) 
    center no-repeat">
    </body>
    </html>


    -xDev

  3. #3
    SitePoint Zealot daemon's Avatar
    Join Date
    Apr 2001
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks xDev.
    But what if I want the image to be clickable (a link)?

  4. #4
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by daemon
    Thanks xDev.
    But what if I want the image to be clickable (a link)?
    Somehow I knew you were going to ask that

    Now that's a much more complicated matter! You have to absolutely position the element (50%,50%) containing the image and then give it minus margins (at half of the dimensions). So the height of the image is 110 (I give the block a -55 top margin), the width is 276 (I give it a -138 left margin).

    HTML Code:
    <html>
    <head>
    <style type="text/css">
    #picBlock {
    	text-align: center;
    	margin-top: -55px;
    	margin-left: -138px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	width: 276px;
    	height: 110px;
    }
    </style>
    </head>
    <body style="text-align: center; margin: auto;">
    <div id="picBlock">
    <a href="http://www.google.com/">
    <img src="http://www.google.com/images/logo.gif" 
    border="0"
    alt="Dead Center!" 
    width="276" height="110" /></a>
    </div>
    </body>
    </html>
    -xDev

  5. #5
    SitePoint Zealot daemon's Avatar
    Join Date
    Apr 2001
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That did the trick.


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
  •