Question

我有一个div $("#organizer_listings_container")最初使用CSS margin: 0 auto;居中，当用户点击按钮时，它使用jQuery来增加其宽度。调整大小后，我使用以下代码将此调整后的div $("#organizer_listings_container")居中。

调整代码大小

// Center content when width changes
if($("#organizer_listings_container").css("position") != 'absolute') {
    $("#organizer_listings_container").css("position","absolute");
    var left = ( $(window).width() - $("#organizer_listings_container").width() ) / 2 + "px";
    $("#organizer_listings_container").css('left', left);       // set initial 'left'
}
left = ( $(window).width() - ( 852 ) ) / 2  + "px";
$("#organizer_listings_container").animate({'left': left}); // animate to final 'left'

问题：当我添加新的div（使用jQuery show()可见）时，它显示在#organizer_listings_container上方，#organizer_listings_container向下移动，这是正确的。现在，当我删除这个新添加的div时，#organizer_listings_container不会向后移动！

我怀疑这是由于所使用的jQuery居中代码所需的绝对定位。当删除新添加的div时，如何使重新调整大小的div重新启动？

使用jQuery计算新添加的div的高度，然后通过将top偏移计算的高度来移动调整大小的div似乎比我想要的更加混乱

Answer 1

你可以避免使用jquery并为新添加的div添加一个类，并将其置于顶部位移中心，如下所示：

<div class="container" style="background:blue; width:100%;">
<div class="box" style="background:green; width:50px; height:40px; margin: 0 auto; margin-top:20px;"></div>
</div>

请注意，该类将包含内联样式，这只是一个示例。

您可能需要jquery的唯一方法是确保容器的高度为100％。但是，如果你只是看到盒子并且你只是使用容器将它定位在中心，那么你不需要这个要求。

使用jQuery对div进行居中

1 个答案: