tags:

views:

1861

answers:

4

What can be a practical solution to center vertically and horizontally content in HTML that works in Firefox, IE6 and IE7?

Some details:

  • I am looking for solution for the entire page.

  • You need to specify only width of the element to be centered. Height of the element is not known in design time.

  • When minimizing window, scrolling should appear only when all white space is gone. In other words, width of screen should be represented as:

"leftSpace width=(screenWidth-widthOfCenteredElement)/2"+
"centeredElement width=widthOfCenteredElement"+
"rightSpace width=(screenWidth-widthOfCenteredElement)/2"

And the same for the height:

"topSpace height=(screenHeight-heightOfCenteredElement)/2"+
"centeredElement height=heightOfCenteredElement"+
"bottomSpace height=(screenWidth-heightOfCenteredElement)/2"

  • By practical I mean that use of tables is OK. I intend to use this layout mostly for special pages like login. So CSS purity is not so important here, while following standards is desirable for future compatibility.
+1  A: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
 <title>Centering</title>
 <style type="text/css" media="screen">
  body, html {height: 100%; padding: 0px; margin: 0px;}
  #outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
  #middle {vertical-align: middle}
  #centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
 </style> 
</head>
<body>
 <table id="outer" cellpadding="0" cellspacing="0">
  <tr><td id="middle">
   <div id="centered" style="border: 1px solid green;">
    Centered content
   </div>
  </td></tr>
 </table>
</body>
</html>

Solution from community.contractwebdevelopment.com also is a good one. And if you know height of your content that needs to be centered seems to be better.

Sasha Yanovets
A: 

For horizontal:

<style>
body
{
    text-align:left;
}
.MainBlockElement
{
    text-align:center;
    margin: 0 auto;
}
</style>

You need the text-align:left in the body to fix a bug with IE's rendering.

Joel Coehoorn
A: 
jessegavin
It is not exactly what I am looking for usually. Centered content should be fixed size (in pixels), not just 50% of the screen.And I fix it by specifying just width of content. And looking to solution to not specify fixed height. So this layout can be used for stuff with different but same width.
Sasha Yanovets
This will result in when you resize window, your content will be always the same size, but centered.
Sasha Yanovets
A: 

From http://www.webmonkey.com/codelibrary/Center_a_DIV

#horizon        
    {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    display: block
    }

#content    
    {
    width: 250px;
    height: 70px;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    visibility: visible
    }

<div id="horizon">
   <div id="content">
      <p>This text is<br><emphasis>DEAD CENTRE</emphasis ><br>and stays there!</p>
   </div><!-- closes content-->
</div><!-- closes horizon-->
keikkeik