Vertical Center on Div

**manik** · 12-14-2008, 09:12 PM

There are lots of solutions online that claims to center elements (both text and image) vertically inside a div. I found too many ifs to get them working. Some requires known element height etc etc. This one solution from vdotmedia.com seem to really work. Works to center a div in the middle of the page as well as works to place elements (text, image etc) at vertical center of the div.

So here is the modified version of the code:

Code:

<html>
<head>
<style type="text/css">
/*change the height: 500px; below to height: 100%; to get the div centered vertically to the page; you would also need body html {height:100%;} to get that working.*/
#container { width: 100%; height: 500px; display: table; }
#position { display: table-cell; vertical-align: middle; width: 100%; text-align: center; }
/*IE does not understand vertical-align:middle. to get it working on IE
we have this conditional css*/
<!--[if IE]>
#container { position: relative; }
#position { position: absolute; top: 50%; }
#content { position: relative; top: -50%; }
<![endif]-->
</style>

</head>
<body>

<div id="container">
    <div id="position">
        <div id="content">
            <img src="test.jpg" height="25" alt="" />
        </div>
    </div>
</div>

</body>
</html>

**manik** · 12-14-2008, 10:13 PM

ok I have to take part of the credit back. It does not seem to work with DOCTYPE XHTML

there need some extra work to get it working.

separate the main css and the conditional part on two files. then use a condition to load corresponding css.

Or you can put the main css on a file and after the line that loads the file, put the conditional part; inside <head></head> tags.

**yawez.com** · 12-15-2008, 10:11 PM

Ahh I see, thanks a lot Manik. You have excellent CSS knowledge

**krates98** · 12-16-2008, 09:36 AM

Hey site is good but i am kind of lost the site navigation is bad lol

Thread: Vertical Center on Div

Thread Tools

Display

Vertical Center on Div

Similar Threads

Google executive hired by Facebook for data center management

Google Data Center Multiple IP Address SEO Research Tool

Windows 7 Touch Control Makes Media Center More Awesome

Call Center Call

Partners wanted for Call Center business

Tags for this Thread

Posting Permissions