W3C home > Mailing lists > Public > www-style@w3.org > July 2003

Re: Center DIV

From: Brian V Bonini <b-bonini@cox.net>
Date: 03 Jul 2003 10:39:32 -0400
To: Jonas Galvez <jonas@onrelease.org>
Cc: www-style@w3.org
Message-Id: <1057243171.10637.86.camel@gfxdesign>

On Thu, 2003-07-03 at 10:18, Jonas Galvez wrote:
> Hi, this is my first post on this list. Does anybody know 
> an efficient way to place a <div> on the center of the 
> page? I've tried everything. I read an article over @ 
> mrclay.org (url below) and the technique he teaches seems 
> to be the perfect approach (in terms of CSS), but 
> unfortunately, it doesn't work in IE.
> 
> http://mrclay.org/web_design/centered_image/
> 
> The *solution* I found was to position the image at 50% of 
> the page and then compensate with a negative margin (with 
> half of the size of the image). For example:
> 
> <head>
>     <style type="text/css">
>     <!--
>     div.icon {
>         position: absolute;
>         margin-top: -20px;
>         margin-left: -20px;
>         top: 50%; left: 50%;
>     }
>     -->
>     </sytle.
> </head>
> <body>
>     <div class="icon">
>         <img src="image.gif" alt="Image" />
>     </div>
> </body>
> 
> Any advice would be highly appreciated... :)
> 


Maybe:

div#container {
	position: absolute;
	text-align: center;
}
 div#image {
	position: (layer over the above div)
	z-index: (set a z-index higher then above)
}

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

Untested, but just a thought...
Received on Thursday, 3 July 2003 10:35:16 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:22 GMT