使用元素自己的宽度分配margin-left

Question

我想将元素的margin-left设置为负自身宽度的一半。这样就获得了文档的宽度：

$("#services .backPanel > div").css({
    'margin-top': -($(this).height()/2),
    'margin-left': -($(this).width()/2)
});

我做错了什么？

CSS

#services{
    margin: 127px 0 0 0;
    width: 100%;
    height: 100%;
    position: relative;
}
#services .services{
    position: relative;
    margin: 40px 9% 0 9%;
}

#services .backPanel{
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px 50px;
    z-index: 80;
    width: 100%;
    height: 100%;
    background: #f9f8f8;
}

#services .backPanel div{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
}

HTML

<div id="services">
    <div class="services">
        <h1>Services</h1>
        <div class="row-fluid">
            <div class="span4">
                <div class="frontPanel design">
                    <h3>Design and development</h3>
                </div>
                <div class="backPanel">
                    <div>
                        <h3>Design and development</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget viverra massa.</p>
                    </div>
                </div>
            </div>
         </div>
    </div>
</div>

解决了它

事实证明我没有考虑设置为父transition的css .backPanel属性，这导致函数在加载元素时读取元素的宽度和高度。在为所有属性设置transition后，内部div仍然从0增长到最终的宽度和高度。

注意以备将来参考：在阅读尺寸时，请始终考虑对象动画的过渡。

Answer 1

如果我没有误会$(this)在您的情况下指向window。尝试：

$("#services .backPanel > div").each(function() {
    var element = $(this);
    element.css({
        'margin-top': -(element.height()/2),
        'margin-left': -(element.width()/2)
    });
});

http://jsfiddle.net/peQ2R/

Answer 2

事实证明我没有考虑设置为父transition的css .backPanel属性，这导致函数在加载元素时读取元素的宽度和高度。通过为所有属性设置过渡，内部div仍然从0增长到最终的宽度和高度。

请注意以供将来参考 ：在阅读尺寸时，请始终考虑对象动画的过渡。