Question

我有一个位置的div：relative 。在div中我放置了位置：绝对的图像，因为我将有一个带有淡入淡出和淡出的幻灯片，并且图像必须是绝对的。

我想在中心对齐绝对定位图像他们的父div。这可以吗？在css部分的原因我已经定义了所有图像

left:0px;

我的编码如下：

<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>

先谢谢！

Answer 1

集：

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

所以在这种情况下，对于第三张图片：

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

请参阅： http://jsbin.com/ufiqum

Answer 2

您需要自己计算位置。

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

如何在中心对齐绝对定位图像？

2 个答案: