Take the 2-minute tour ×

i have a div with position:relative. Inside that div i have placed images with position:absolute because i'm going to have a slideshow with fadeIn and Fade out and the images have to be positioned absolute.

I would like to align the absolute-positioning images in the center of their parent div. Can this be done?? Cause in the css part i have already defined all the images to be


My coding is as follows:

<style type="text/css">

div img{

    border:1px solid blue;

<div style="border:2px solid red;position:relative;width:500px;height:300px;">

    <img src="01.JPG" width="403" height="300"/>    
    <img src="02.JPG" width="403" height="300"/>
    <img src="03.jpg" width="170" height="290"/> <!-- this is a portrait,BIG problem         here!!! --> <!-- The image is positioned left -->


Thanks, in advance!

share|improve this question

2 Answers 2

up vote 7 down vote accepted


left:50%; margin-left:-<image width/2>px

So in this case, for the third image:

left:50%; margin-left:-85px

See: http://jsbin.com/ufiqum

share|improve this answer
Thanks for the code,so i have to use jquery in order to take the .width() of the Image and then calculate the left positioning, right? Or is there any other way to implement it?How did you calculate that in your coding?? –  programmer Aug 19 '11 at 14:58
I divided the image width by 2. I see that wasn't entirely clear so I've updated my answer. Yes, you'll need JavaScript/jQuery to calculate this. –  thirtydot Aug 19 '11 at 15:03
Here's a quick implementation: jsbin.com/ebimow/edit#html,live –  thirtydot Aug 19 '11 at 15:08
Thank you very much –  programmer Aug 19 '11 at 19:05

You need to calculate the position yourself.

left = center position - 1/2 of image width

share|improve this answer
Thanks for your answer, how can i get the value of the "center position"?? –  programmer Aug 19 '11 at 14:39
center = 1/2 of the width of the containing element. –  Diodeus Aug 19 '11 at 14:42

Your Answer


