Vertical align image - Howto - The easist way!

Ref: http://www.webmasterworld.com/forum83/6588.htm

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;
font-size:12px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
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>
</table>

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:

http://www.applekingdom.net

Comments

Post a Comment

Popular posts from this blog

TCPDF How to show/display Chinese Character?

Thanks to this article (in Simplified Chinese, updated new link), there is a way to embed a TTF that can display Chinese (Traditional and Simplify, and possibly Japanese). Environment:  TCPDF 6.0.020 PHP 5.3.8 Windows 7 The problem: If you follow this post that said: using cid0cs or cid0ct to display Chinese, it can display the character correctly, only to the extend that user installed a correct font package.  However, chances are other users who didn't install that package cannot view that PDF since there are several packages and versions of PDF viewer (mainly Adobe).  And even worse: even if user installed certain CJK font package, the PDF still not displayed correctly (show empty page). And according to the official TCPDF documentation about font : The fonts that could be not embedded are only the standard core fonts and CID-0 fonts . The solution: Again, thanks to the post above (in simplified Chinese), now developer can use a font that: Can disp...
Read more

How to fix fancy box/Easy Fancybox scroll not work in mobile

Hi The Problem: If you are working on EasyFancybox or just normal fancybox JS , and you have this problem: In your iOS device when a popup is opened, if the page is too wide and your pop up cannot show all, when user taps and drag the screen, the background will be dragged instead of the pop-up content. To fix, add this in your CSS: -webkit-overflow-scrolling: touch !important; So which element should you apply it to? In Easy Fancybox, you will see these 2 lines: <div id="fancybox-content"........>         <iframe id="fancybox-frame" name............... Apply to fancybox-content, not fancybox-frame So in your CSS, it should be: #fancybox-content{         overflow: scroll !important;         -webkit-overflow-scrolling: touch !important; } It works for me, and I hope it helps someone also.
Read more

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

Image
This is the exact config that I need to configure a load balancing without other cloud services like Amazon, rackspace or GoGrid, completely customized. I put my question on stackoverflow.com but no luck, so I put it on Quora.com and immediately I got response: My Notes: The load balancer is done by my colleagues so I am not sure what is the config of it.  But one thing to note: Your LB should enable "session stickiness" so that the session will follow visitor.  By the way, I am using Round-robins. Session: Actually I did not use session, but it seems that other plugins (like WPML) will use it.  If I use Apache load balancer, when I go to wp-admin through load balancing IP, I will not able to login, given the username and password is the same.  I will be redirected to login page.  So ask your load balancer providers or check your load balancer config and see how to manage the "Session Stickiness" issue. Shared folder: your wp-content/uploads folder...
Read more