Vertical align image - Howto - The easist way!


Actually, it is not that difficult provided that you know the way of doing this. I know from varies web site that vertically align an image in the middle of the screen is very difficult. I agree and actually I have spent more than an hour of doing this.

To make it short: it is tested in FF2, IE7.

OK, let's go to the details.

CSS file:

body, html {
font-family: Arial, Helvetica, sans-serif;
height:100%; /*This line is the most important one.*/

HTML file:

<table class="index" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr><td align="center" valign="middle"><img src="your.jpg" /></td></tr>

That's it!

As far as I know, the height=100% in CSS will set the whole to fit the height of the screen. And because you also set the width and height of the table to 100%, you can therefore be able to both horizontally and vertically align the image.

The real example:


Popular posts from this blog

TCPDF How to show/display Chinese Character?

Using wget bypass htaccess username password 401 authorization

Wordpress Load balancing: 2 web servers 1 MySQL without any Cloud services