Question

我有一个div，通过jquery动态插入到另一个div中，如此

这是jQuery：

$('#portSecW div:not(".closeXbtn")').prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');

这是常规的HTML：

<div class="portThumbsL">
<a href="images/sitePortThumbs/2882.png"><img src="images/sitePortThumbs/2882.png" alt="2882films"/></a>
<div class="thumbTxtSmall">2882FILMS</div>

最终输出是这个

<div class="portThumbsL">
<div class="portSecRollOver"><div class="portSecInner"></div></div>
<a href="images/sitePortThumbs/2882.png"><img src="images/sitePortThumbs/2882.png" alt="2882films"/></a>
<div class="thumbTxtSmall">2882FILMS</div>

我这样做是为了动画一个翻转效果即时拍摄......等等 portSecInner是插入其他动态内容等的地方...（只是文本） .portSecInner的父级是portSecRollOver，它绝对定位。

所以我遇到的问题是在css我有一个简单的

.portSecInner{ margin:0px auto !important;}

但它没有中心...甚至没有移动它。现在我手动定位它例如（保证金：10px 20px）等，它移动但很明显，并不是所有内容的中心。

我有什么想法可以纠正这个并让这个宝宝居中？

Answer 1

缺少<div class="portThumbsL">的结束标记。关闭它并尝试。

保证金：我猜是0自动正常工作。查看此演示http://jsfiddle.net/85s4j/1/

如果您不想修改portSecInner的宽度，请添加margin:0 25px;，以便将div设为父div的中心

Answer 2

margin: 0 auto只有在为元素及其父级设置width后才能工作，如下所示：

.portSecRollOver {
    width: 300px;
}
.portSecInner {
    width: 200px;
    margin: 0 auto;
}

css水平居中动态div（不工作）应该很简单

2 个答案: