Welcome to WebmasterServe!

FREE TO JOIN! Join us now to engage in informative and friendly discussions about Webmastering, SEO, SEM, Internet Marketing, Programming, Graphic Design, Online Jobs and more. What are you waiting for? Ready to join our friendly community? It takes just one minute to register.

Dismiss Notice

Join WebmasterServe Forums 
Join the discussion! Have a better idea or an opinion? It takes just one minute to register Click Here to Join

Help Me/Question Css Howto: Put An Image Exactly In The Center Of The Page

Discussion in 'CSS and CSS3 Coding Discussions' started by Dragos, Jan 23, 2010.

Thread Status:
Not open for further replies.
  1. Dragos

    Yellow Belt

    Joined:
    Nov 10, 2009
    Messages:
    98
    Ratings:
    +2 / -0
    I got this problem a couple of days ago, and I want to share the answer with you.
    I wanted to have a page with an image on it, and I wanted the image to be exactly in the center/middle of the page, no matter the screen resolution.
    First, here is how you do it for a image with size 600px/600px:

    On the css file you need to have the following:
    HTML:
    Select All
    .centered-box { width: 600px; height: 600px; left: 50%; top: 50%; margin-top: -300px; margin-left: -300px; position: fixed; } * html .centered-box { position:absolute; }
    And on the html page just add

    HTML:
    Select All
    <div class="centered-box"> <img src="image.jpg"/> </div>
    And now to explain the CSS code, so you can make it suitable for you:

    HTML:
    Select All
    .centered-box { width: 600px; // This is the width of your image height: 600px; // This is the height of your image left: 50%; top: 50%; margin-top: -300px; // This value needs to be exactly half of your image's height margin-left: -300px; // This value needs to be exactly half of your image's width position: fixed; } * html .centered-box { position:absolute; }
     
  2. lqyromeo

    lqyromeo Guest

    Ratings:
    +0 / -0
    Sorry guy, maybe you are puzzled, the width should be belong the DIV, not iamge, is it ture?
     
  3. scripteen

    White Belt

    Joined:
    Jun 8, 2010
    Messages:
    10
    Ratings:
    +0 / -0
    try margin:0 auto; in css. It should work.
     
Thread Status:
Not open for further replies.

Share This Page