Geek Answers Handbook

Centering the website horizontally and vertically

view http://www.eveo.org
Download site for easy modification:
http://www.eveo.org/backup/eveo.rar
http://www.eveo.org/backup/eveo.zip

As you can see right now, it is centered horizontally and vertically using a simple table method:

<table cellpadding="0" cellspacing="0"> <tr> <td align="left"> *put anything in here and it will be aligned horizontally and vertically </td> </tr> </table> accompanying CSS: table { height: 100%; width: 100%; vertical-align: middle; }

However, in my document I did not install doctype, I only have:

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

If I add a standard doctype, for example, the following:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

my table method is no longer valid and does not work. So I need a new way to centralize my web page vertically and horizontally regardless of the size of the browser window.

+4
source share
4 answers

There are several cross-browser solutions that do not require Javascript or hacking.

A good example is here.

Look also at this one .

For some training check out this great gtalbot example on horizontal alignment in CSS.

good luck>)

+5
source

HTML

 <div id="container"></div>

CSS

 div#container { width: 200px; height: 200px; margin-left: -100px; /* Half of width */ margin-top: -100px; /* Half of height */ position: absolute; left: 50%; top: 50%; }
+3
source

You can do this using CSS / HTML, but the method I'm going to use will work best if your height is known, or you can use JavaScript to capture the height.

HTML:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Centered Page</title> </head> <body> <div class="container"> <!-- My Content will be 500px tall --> </div> </body> </html>

CSS

 .container { height:500px; margin:-250px /* Half the height container */ auto; position:absolute; top:50%; width:960px; }

JavaScript (jQuery): If you do not know the height, or change it.

 (function() { var $container = $('.container'), height = $container.outerHeight(); $container.css({ 'marginTop': (height/2) * -1 }); })();
+2
source

There is an easy way to center the page using only CSS using inline blocks: http://jsfiddle.net/CUd8G/

0
source

More articles:


All Articles