使用元素自己的宽度指定margin-left [英] Assign margin-left using element's own width

问题描述

我想将元素的 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>服务< / h1> 
< div class =row-fluid> 
< div class =span4> 
< div class =frontPanel design> 
< h3>设计和开发< / h3> 
< / div> 
< div class =backPanel> 
< div> 
< h3>设计和开发< / h3> 
< p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Aliquam eget viverra massa。< / p> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

解决了

没有考虑设置为父 .backPanel 的css transition 属性，这导致函数读取元素在加载时的宽度和高度。对于所有属性的 transition 设置，内部 div 仍然从0到其最终宽度和高度增长。 / p>

注意以后参考：在读取对象的尺寸时，始终考虑对象动画的过渡。

解决方案

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

em> ：在读取对象的尺寸时，始终考虑对象动画的过渡。

I want to set the margin-left of an element to negative half the width of itself. This gets the document's width instead:

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

What am I doing wrong?

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>

SOLVED IT

Turns out that I hadn't taken into account the css transition property that was set to the parent .backPanel, which caused the function to read the element's width and height at it was being loaded. With the transition set for all properties, the inner div was still growing from 0 towards its final width and height.

Note for future reference: Always take into account the transition for the animations of objects when reading their dimensions.

解决方案

Turns out that I hadn't taken into account the css transition property that was set to the parent .backPanel, which caused the function to read the element's width and height at it was being loaded. With the transition set for all properties, the inner div was still growing from 0 towards its final width and height.

Note for future reference: Always take into account the transition for the animations of objects when reading their dimensions.

这篇关于使用元素自己的宽度指定margin-left的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！