使用元素自己的宽度指定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屋!