How can I make an image appear in the centre of the page?

Discussion in 'HTML' started by Ant, Aug 10, 2005.

  1. Ant

    Ant Guest

    Hi,

    I'm trying to make the image appear in the centre of the page no matter what
    the resolution is.

    I had the idea of creating a 1*1 table whose dimensions were the size of the
    viewable browser area and then centering the image in that but I'm running
    into some problems.

    Then I had the idea of setting the IMG hspace and vspace attributes but then
    I realised that they would need ot be dynamically calculated.

    So am I missing an obvious method?

    If so then please enlighten me!

    Cheers
     
    Ant, Aug 10, 2005
    #1
    1. Advertising

  2. Ant

    Des Guest

    if this is in a table try this

    <table cellpadding="0" cellspacing="0" width="900" align="center">

    this will keep things centeral

    Desmond.
     
    Des, Aug 10, 2005
    #2
    1. Advertising

  3. Ant

    Toby Inkster Guest

    Ant wrote:

    > I'm trying to make the image appear in the centre of the page no matter
    > what the resolution is.


    The best reliable way is to put it as a background image:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <title>some title</title>
    <style type="text/css">
    body
    {
    background-image: url("foo.jpeg");
    background-repeat: no-repeat;
    background-position: center center;
    }
    div
    {
    position: relative;
    width: 20em;
    left: -99em;
    }
    </style>
    <div>alt text</div>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Aug 10, 2005
    #3
  4. Ant

    Guest

    [placing it as a background image]

    Will be a problem for printing though.
     
    , Aug 10, 2005
    #4
  5. On 10 Aug 2005 01:24:23 -0700, <> wrote:

    > [placing it as a background image]
    >
    > Will be a problem for printing though.
    >


    What will be? What are you referring to? Where is the quote from the post you
    reply to? Who wrote it?

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Aug 10, 2005
    #5
  6. Ant

    Ant Guest

    Thanks everyone for the replies!

    I should have mentioned that I would like the image to act as the entrance
    to a site - so you click on the picture and get taken to the main page - so
    I don't think the background method will work for this - my bad, should have
    said.
     
    Ant, Aug 10, 2005
    #6
  7. Ant

    Jedi Fans Guest

    Ant wrote:
    > Thanks everyone for the replies!
    >
    > I should have mentioned that I would like the image to act as the entrance
    > to a site - so you click on the picture and get taken to the main page - so
    > I don't think the background method will work for this - my bad, should have
    > said.
    >
    >

    css:
    img.central{position:absolute;width:WIDTHOFIMAGEpx;height:HEIGHTOFIMAGEpx;left:50%;top:50%;margin-top:-HALFOFIMAGEHEIGHTpx;margin-left:-HALFOFIMAGEWIDTHpx;}

    html:
    <img src="enter.png" class="central" alt="Enter the website" />

    --
    Hope This Helped and MTFBWY...
    Kieren aka JediFans - <URL:http://jedifans.com/>
    The Force Is With Me, SuSE Linux Professional 9.3, Mozilla Firefox
    1.0.6, Mozilla Thunderbird 1.5 Alpha 2 and Revenge Of The Sith!
     
    Jedi Fans, Aug 10, 2005
    #7
  8. Ant

    Ant Guest

    wow! thanks!!

    that did the job perfectly

    "Jedi Fans" <"news[at]jedifans[-=dot=-]com"> wrote in message
    news:42f9dfbf$0$18637$...
    > Ant wrote:
    >> Thanks everyone for the replies!
    >>
    >> I should have mentioned that I would like the image to act as the
    >> entrance to a site - so you click on the picture and get taken to the
    >> main page - so I don't think the background method will work for this -
    >> my bad, should have said.

    > css:
    > img.central{position:absolute;width:WIDTHOFIMAGEpx;height:HEIGHTOFIMAGEpx;left:50%;top:50%;margin-top:-HALFOFIMAGEHEIGHTpx;margin-left:-HALFOFIMAGEWIDTHpx;}
    >
    > html:
    > <img src="enter.png" class="central" alt="Enter the website" />
    >
    > --
    > Hope This Helped and MTFBWY...
    > Kieren aka JediFans - <URL:http://jedifans.com/>
    > The Force Is With Me, SuSE Linux Professional 9.3, Mozilla Firefox 1.0.6,
    > Mozilla Thunderbird 1.5 Alpha 2 and Revenge Of The Sith!
     
    Ant, Aug 10, 2005
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andy:P
    Replies:
    8
    Views:
    516
    Andy Peat
    Jan 15, 2004
  2. Tim Stokes

    Centre align content on the page

    Tim Stokes, Jun 17, 2004, in forum: HTML
    Replies:
    2
    Views:
    401
    Tim Stokes
    Jun 17, 2004
  3. xxfiredragonxx
    Replies:
    0
    Views:
    621
    xxfiredragonxx
    Dec 19, 2005
  4. Vince Morgan

    Centre an image in a <div>

    Vince Morgan, Nov 16, 2006, in forum: HTML
    Replies:
    10
    Views:
    905
    Vince Morgan
    Nov 16, 2006
  5. Mike Barnard
    Replies:
    4
    Views:
    397
    Mike Barnard
    May 3, 2007
Loading...

Share This Page