Question

<div class='img-box'>
<img /> //position absolute
<img /> //position absolute
<img /> //position absolute
<img /> //position absolute

在这段代码中，我想把图像放在div的中心，但由于图像的绝对位置，它不会进入中心对齐，所以，请帮我把这个图像放在div的中心。请帮帮我

Answer 1

首先，将div设置为position:relative 其次，添加以下代码：

$(document).ready(function(){
    var div_height = $(".img-box").height();
    var div_width = $(".img-box").width();
    $("img").each(function(){
        $(this).css({
            "top": (div_height-$(this).height())/2+"px",
            "left": (div_width-$(this).width())/2+"px"
        });
    });
});

要使元素相对于父元素居中，必须从父元素的宽度中减去子元素的宽度。将此结果除以2后，您就知道所需的子项偏移（相对于父项）。

Answer 2

如果你知道img的宽度和高度，你可以设置top and left 50%页边距：-imgHeight/2 0 0 -imgWidth/2

Answer 3

您可以在css中执行此操作：

.img-box img {
    position:relative;
    margin: auto;
    display:block;
}

如果你已经有位置：绝对适用于你的img节点，这可能意味着你有其他奇怪的CSS搞砸了。

虽然如果您打算让图像显示在彼此之上，但这不是解决方案，但您的问题并不明确。

Answer 4

在css中：图像{
职位：亲属;
左：50％;
}

如果图像没有排列在一起，我只是将它们放在一个较小的div中，其宽度设置为与图像的宽度相同，因此第二个图像被强制显示在下面而不是而不是旁边。然后使用'left：50％'

设置第二个div显示在父级的中心

可能不是最好的方法，但这可能就是我做的。

将图像放在图像处于绝对位置的div的中心

4 个答案: