Menu
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
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!
567
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
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
