如何对齐中心的绝对位置图像?

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.

我有一个部门的职位:亲戚。在div中，我放置了位置为绝对的图像因为我将会有一个fadeIn和淡出的幻灯片图像必须是绝对的。

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

我想把绝对定位的图像对齐到它们的父div的中间。可以这样做吗?因为在css部分我已经定义了所有的图像

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!

谢谢,提前!

2 个解决方案

#1

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

参见:http://jsbin.com/ufiqum

#2

You need to calculate the position yourself.

你需要自己计算位置。

left = center position - 1/2 of image width

左=中心位置-图像宽度的1/2。

#1