Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Centering a website horizontally and vertically

Tags:

html

css

view on 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 an easy 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 set a doctype, I only have:

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

If I add a standard doctype such as 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 center my webpage vertically and horizontally regardless of browser window size.

like image 735
eveo Avatar asked Dec 28 '22 15:12

eveo


1 Answers

There are some cross-browser solutions that don't require Javascript or hacking.

One good example is here

Have a look also on this one.

For some learning, check this excellent example of gtalbot about horizonal align in CSS.

good luck >)

like image 57
Rdpi Avatar answered Dec 30 '22 06:12

Rdpi