如何将边距或填充设置为父容器的高度的百分比？ [英] How to set the margin or padding as percentage of height of parent container?

问题描述

我一直在用我的脑袋在css中创建垂直对齐，使用以下

I had been racking my brains over creating a vertical alignment in css using the following

.base{
    background-color:green;
    width:200px;
    height:200px;
    overflow:auto;
    position:relative;
}

.vert-align{
    padding-top:50%;
    height:50%;
}

并使用以下div结构。

and used the following div structure.

<div class="base">
   <div class="vert-align">
       Content Here
   </div>
</div>

虽然这似乎适用于这种情况，我惊讶的是，当我增加或减少宽度我的基本div，垂直对齐会扣。我期望当我设置padding-top属性，它将填充作为父容器的高度的百分比，这是基础在我们的情况，但上述50％的值计算为宽度。 ：（

While this seemed to work for this case, i was surprised that when i increased or decreased the width of my base div, the vertical alignment would snap. I was expecting that when I set the padding-top property, it would take the padding as a percentage of the height of the parent container, which is base in our case, but the above value of 50 percent is calculated as a percentage of the width. :(

有没有办法将填充和/或边距设置为高度的百分比，而无需使用javascript？

Is there a way to set the padding and/or margin as a percentage of the height, without resorting to using javascript?

提前感谢。

推荐答案

我也有这个问题

修复是的，垂直填充和边距是相对于宽度，但

The fix is that yes, vertical padding and margin are relative to width, but top and bottom aren't.

所以只是把div放在另一个div中，在内部div中使用 top：50％（记住 / code>如果仍然不起作用的话）

So just place a div inside another, and in the inner div, use something like top:50% (remember position matters if it still doesn't work)

这篇关于如何将边距或填充设置为父容器的高度的百分比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！