如何将边距或填充设置为父容器的高度百分比？

  • Z时代
  • 2024-01-10
  • 分类：问答

我一直在绞尽脑汁使用以下命令在CSS中创建垂直对齐方式

.base{
        background-color:green;
        width:200px;
        height:200px;
        overflow:auto;
        position:relative;
    }
    .vert-align{
        padding-top:50%;
        height:50%;
    }
<!-- and used the following div structure. -->
    <div class="base">
       <div class="vert-align">
           Content Here
       </div>
    </div>

尽管这似乎适用于这种情况，但令我感到惊讶的是，当我增加或减小基本div的宽度时，垂直对齐方式会对齐。我期望当我设置padding-

top属性时，会将填充值作为父容器高度的百分比（在我们的示例中为基数），但是上述50％的值是按宽度。:(

有没有一种方法可以将填充和/或边距设置为高度的百分比，而无需使用JavaScript？

回答：

解决方法是，是的，垂直填充和边距与宽度有关，而top与宽度bottom

因此，只需将div放置在另一个div内，然后在内部div中使用类似的命令即可top:50%（请记住，position如果它仍然无法正常工作）

以上是 如何将边距或填充设置为父容器的高度百分比？ 的全部内容， 来源链接： utcz.com/qa/417433.html

回到顶部