Geek Answers Handbook

How can I align the images with the absolute location in the center?

I have a div with : relative . Inside this div, I placed the images with the position: absolute , because I will have slide shows with fadeIn and Fade out, and the images should be absolute.

I would like to align the images with absolute positioning in the center of their parent div. It can be done? The reason for the css part, I have already identified all the images that will be

left:0px;

My coding is as follows:

 <html> <head> <style type="text/css"> div img{ border:1px solid blue; position:absolute; left:0px; top:0px; } </style> </head> <body> <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 --> </div> </body> </html>

Thanks in advance!

+4
source share
2 answers

Set:

 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

+10
source

You need to calculate the position yourself.

left = center position - 1/2 image width

+4
source

More articles:


All Articles