Centering Image Vertically and Horizontally!

Discussion in 'HTML & Website Design' started by Proficient, Mar 31, 2009.

0
  1. #1
    I can't get it right, someone helped me before but i forgot how.

    How can i make the image i made dead center of the page?

    Like on the x and y axis.

    Thanks.
     
    Proficient, Mar 31, 2009 IP
  2. Rei Fields

    Rei Fields Greenhorn

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    18
    #2
    CSS

    margin:0 auto; margin-top:10%; width:[size of picture]px; height:[size of picture]px;
    Code (markup):
    HTML
    <div style="margin: 0 auto; margin-top: 10%;width:600px;height:300px;"><img src="imagehere.jpg"></div>
    Code (markup):
    Hope it helps :).
     
    Rei Fields, Mar 31, 2009 IP
  3. xira

    xira Active Member

    Messages:
    315
    Likes Received:
    8
    Best Answers:
    4
    Trophy Points:
    68
    #3
    Rei Fields has it right. You don't need both the HTML and CSS however. (Thought it might be confusing.)

    You can either class your HTML tag and point to the CSS elsewhere. Or put the CSS directly in the HTML tag.

    Ex1: <img scr="yourimage" widht="xxx" height="xxx" alt="altText" style="width:xxx px; margin 0px auto; margin-top: xx%;" />

    Ex2: <img scr="yourimage" widht="xxx" height="xxx" alt="altText" class="centerImage" />

    .centerImage{
    width:xxx px;
    margin 0px auto;
    margin-top: xx%
    }
     
    xira, Apr 1, 2009 IP