Comments on: Using css to center an image with position:absolute http://www.gilluminate.com/2006/01/06/using-css-to-center-an-image-with-position-absolute/ By Jason Gill Fri, 03 Feb 2012 08:45:00 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Chris http://www.gilluminate.com/2006/01/06/using-css-to-center-an-image-with-position-absolute/#comment-4493 Chris Tue, 31 Jan 2012 00:28:47 +0000 http://blog.gillumiante.com/2006/01/06/using-css-to-center-an-image-with-position-absolute#comment-4493 Thank you! You've relieved so much frustration. Thank you! You've relieved so much frustration.

]]> By: James Goss http://www.gilluminate.com/2006/01/06/using-css-to-center-an-image-with-position-absolute/#comment-4485 James Goss Fri, 20 Jan 2012 01:22:03 +0000 http://blog.gillumiante.com/2006/01/06/using-css-to-center-an-image-with-position-absolute#comment-4485 can also be accomplished without placing the image in a div. In case anyone else reads this ancient piece. img { position:absolute; width:600px; height:500px; left:50%;margin-left:-300px; top:200px; z-index:500;} the trick is left:50%, and then setting the margin to being -50 percent of your image size. (600wide = -300px); can also be accomplished without placing the image in a div. In case anyone else reads this ancient piece.

img { position:absolute; width:600px; height:500px; left:50%;margin-left:-300px; top:200px; z-index:500;}

the trick is left:50%, and then setting the margin to being -50 percent of your image size. (600wide = -300px);

]]> By: Oliver Foxley http://www.gilluminate.com/2006/01/06/using-css-to-center-an-image-with-position-absolute/#comment-1396 Oliver Foxley Mon, 31 Oct 2011 19:14:02 +0000 http://blog.gillumiante.com/2006/01/06/using-css-to-center-an-image-with-position-absolute#comment-1396 My problem is that I have a fluid width/height image inside a couple of parent divs and I need to horizontally centre the images as with this example. The only difference is your code doesn't seem to work with images that are defined in the href attribute of an anchor. There is no actual img tag markup in my HTML to define these images. I am using external CSS to define rules that are applied to the images and can achieve a cross browser height resize so the image is always 100% height of the viewport, however I can only do this using position: absolute, despite experimenting with many different positioning options on the parent elements. Position absolute however makes my images left aligned by default. Is there another way of centering absolute elements using margins without defining a fixed width for images? 'margin: 0 auto;' does not work here either My problem is that I have a fluid width/height image inside a couple of parent divs and I need to horizontally centre the images as with this example. The only difference is your code doesn't seem to work with images that are defined in the href attribute of an anchor. There is no actual img tag markup in my HTML to define these images.

I am using external CSS to define rules that are applied to the images and can achieve a cross browser height resize so the image is always 100% height of the viewport, however I can only do this using position: absolute, despite experimenting with many different positioning options on the parent elements. Position absolute however makes my images left aligned by default. Is there another way of centering absolute elements using margins without defining a fixed width for images? 'margin: 0 auto;' does not work here either

]]> By: ioana http://www.gilluminate.com/2006/01/06/using-css-to-center-an-image-with-position-absolute/#comment-165 ioana Mon, 23 May 2011 09:30:14 +0000 http://blog.gillumiante.com/2006/01/06/using-css-to-center-an-image-with-position-absolute#comment-165 Thank you so much...you made my day :) Thank you so much…you made my day :)

]]> By: vincent http://www.gilluminate.com/2006/01/06/using-css-to-center-an-image-with-position-absolute/#comment-164 vincent Sun, 06 Mar 2011 05:48:02 +0000 http://blog.gillumiante.com/2006/01/06/using-css-to-center-an-image-with-position-absolute#comment-164 Owe you a beer if your ever in Reefton NZ Owe you a beer if your ever in Reefton NZ

]]> By: Molly http://www.gilluminate.com/2006/01/06/using-css-to-center-an-image-with-position-absolute/#comment-163 Molly Wed, 04 Aug 2010 00:40:52 +0000 http://blog.gillumiante.com/2006/01/06/using-css-to-center-an-image-with-position-absolute#comment-163 BTW, Gary...change the z-index in the style sheet part. That's what I did and it worked for me. BTW, Gary…change the z-index in the style sheet part. That’s what I did and it worked for me.

]]> By: Molly http://www.gilluminate.com/2006/01/06/using-css-to-center-an-image-with-position-absolute/#comment-162 Molly Wed, 04 Aug 2010 00:39:59 +0000 http://blog.gillumiante.com/2006/01/06/using-css-to-center-an-image-with-position-absolute#comment-162 You have no idea what you have just done for my life! I have been fighting with this for SOOOO long. Thank you, thank you, thank you! You have no idea what you have just done for my life! I have been fighting with this for SOOOO long. Thank you, thank you, thank you!

]]> By: Gary http://www.gilluminate.com/2006/01/06/using-css-to-center-an-image-with-position-absolute/#comment-161 Gary Sat, 08 May 2010 06:03:07 +0000 http://blog.gillumiante.com/2006/01/06/using-css-to-center-an-image-with-position-absolute#comment-161 This almost worked for me but in this mode, I cannot change the z-index so the image is a background. I can only do this when I absolute it inside the image tag This almost worked for me but in this mode, I cannot change the z-index so the image is a background. I can only do this when I absolute it inside the image tag

]]> By: Donna McMaster http://www.gilluminate.com/2006/01/06/using-css-to-center-an-image-with-position-absolute/#comment-160 Donna McMaster Thu, 14 Jan 2010 23:08:12 +0000 http://blog.gillumiante.com/2006/01/06/using-css-to-center-an-image-with-position-absolute#comment-160 This worked fine on Firefox and IE 8, but in order to make it work on earlier IE versions I needed to add a magic "clearfix" div right after the div containing the centered image. /* slightly enhanced, universal clearfix hack */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ For the origins of clearfix and pointer to newer stuff, see http://www.positioniseverything.net/easyclearing.html Donna This worked fine on Firefox and IE 8, but in order to make it work on earlier IE versions I needed to add a magic “clearfix” div right after the div containing the centered image.

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

For the origins of clearfix and pointer to newer stuff, see
http://www.positioniseverything.net/easyclearing.html

Donna

]]> By: Donna McMaster http://www.gilluminate.com/2006/01/06/using-css-to-center-an-image-with-position-absolute/#comment-159 Donna McMaster Wed, 13 Jan 2010 23:32:31 +0000 http://blog.gillumiante.com/2006/01/06/using-css-to-center-an-image-with-position-absolute#comment-159 thank you so much! just spent a half hour trying to figure this one out and finally gave up and searched ... nifty solution! thank you so much! just spent a half hour trying to figure this one out and finally gave up and searched … nifty solution!

]]>