Centering Div in the middle of the page

Posted by shinjuo on Stack Overflow See other posts from Stack Overflow or by shinjuo
Published on 2010-05-30T03:50:58Z Indexed on 2010/05/30 3:52 UTC
Read the original article Hit count: 499

Filed under:
|
|

What is the best way to center the entire page in the middle of the web browser?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>test.html</title>
    <style type="text/css">
        .testimonials_png
        {
            position: absolute;
            left:20px;
            top:397px;
            width:220px; 
            height:395px;
            background: url("test_files/testimonials.png") no-repeat;
        }
        .homeLink_png
        {
            position: absolute;
            left:-1px;
            top:243px;
            width:203px; 
            height:75px;
            background: url("test_files/homeLink.png") no-repeat;
        }
        .sidingLink_png
        {
            position: absolute;
            left:202px;
            top:243px;
            width:180px; 
            height:75px;
            background: url("test_files/sidingLink.png") no-repeat;
        }
        .windowsLink_png
        {
            position: absolute;
            left:382px;
            top:243px;
            width:181px; 
            height:75px;
            background: url("test_files/windowsLink.png") no-repeat;
        }
        .roofingLink_png
        {
            position: absolute;
            left:563px;
            top:243px;
            width:183px; 
            height:75px;
            background: url("test_files/roofingLink.png") no-repeat;
        }
        .aboutLink_png
        {
            position: absolute;
            left:746px;
            top:243px;
            width:205px; 
            height:75px;
            background: url("test_files/aboutLink.png") no-repeat;
        }
        .banner_png
        {
            position: absolute;
            left:0px;
            top:0px;
            width:950px; 
            height:243px;
            background: url("test_files/banner.png") no-repeat;
        }

    </style>
  </head>
  <body>
    <div class="testimonials_png"> </div>
    <div class="homeLink_png"> </div>
    <div class="sidingLink_png"> </div>
    <div class="windowsLink_png"> </div>
    <div class="roofingLink_png"> </div>
    <div class="aboutLink_png"> </div>
    <div class="banner_png"> </div>
  </body>
</html>

© Stack Overflow or respective owner

Related posts about html

Related posts about div