logo标签列表

如何将绝对定位的图片居中对齐？

htmlcsscss-position
5
我有一个带有position:relative的div。 在这个div里，我放置了使用position:absolute定位的图片，因为我将使用fadeIn和Fade out制作幻灯片，而这些图片必须被绝对定位。
我想把这些绝对定位的图片居中对齐到它们父级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>

Thanks, in advance!

2个回答
10

设置：

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

因此在这种情况下，对于第三张图像：

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

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

谢谢你提供的代码，那么我必须使用jQuery来获取图像的宽度，然后计算左侧定位，对吗？还是有其他实现方法？你在编码中是如何计算的？ - programmer
我将图像宽度除以2。我发现这并不完全清楚，所以我更新了我的答案。是的，你需要JavaScript/jQuery来计算这个。 - thirtydot
4

您需要自己计算位置。

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

谢谢您的回答，我该如何获取“中心位置”的值？ - programmer
1
居中 = 包含元素宽度的1/2。 - Diodeus - James MacFarlane
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接