将margin-top设置为父元素高度的百分比

我希望元素的margin-top为父元素高度的百分比。将margin-top设置为父元素高度的百分比

例如，如果我有高度为100px的div，我希望在其内部创建一个包含margin-top：25px的p元素，除了通过设置p元素的边距以便可以处理它的父级更改高度。

编辑：对于那些认为这是显而易见的 - 你不能使用margin-top：25％。％除了高度以外使用父元素的宽度。因此，如果您使用margin-top：25％，则将其设置为父div的宽度的25％。

来源

2014-07-19 Don P

uhm ... margin-top：25％; ？ –

这不是那么简单 –

Nah @brett，这不是保证金最高的25％。 margin-top％使用元素的宽度进行大小调整。 –

这是我所看到的是解决方案之一：

<div style="height:100px; background-color:red; color:white; position:relative;"> 
    <div style="top: 25%;position: absolute;"> 
     <p> I want an elements margin-top to be a % of t</p> 
    </div> 
</div>

来源

2014-07-19 21:33:49

尝试定位元素，而不是给它一个余量，像这样：

p { 
    position: relative; 
    top: 50%; 
}

Demo for reference

来源

2014-07-19 21:40:59 JoeJ

你可以使用JS来测量父元素在渲染后的高度（offsetHeight），然后将其除以4并将结果分配给childs top或marginTop属性。

var parent = document.getElementById("parent"); 
var child = document.getElementById("child"); 
var marginVal = (parent.offsetHeight)/4; 
child.style.top = marginVal+"px";

小提琴：http://jsfiddle.net/Nillervision/AwqJK/

如果您缠绕JS的功能，您可以把它当页面加载（在window.onload），并在浏览器中得到调整，如果改变的父元素的大小（ window.onresize）

来源

2014-07-19 22:38:46 Nillervision

Thanke Nillervision，但目前不接受JS答案 –

将margin-top设置为父元素高度的百分比

回答

相关问题