如何在 CSS 中使用基于父容器高度的百分比填充或边距？

Patricia Arquette

发布： 2024-12-18 10:04:14

原创

607 人浏览过

How to Use Percentage Padding or Margin Based on Parent Container Height in CSS?

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

当尝试使用 CSS 垂直对齐元素时，这似乎是合乎逻辑的将 padding-top 或 margin-top 属性设置为父容器高度的百分比。但是，使用 padding-top 和 margin-top 百分比会产生相对于容器宽度的值，从而在容器宽度更改时导致意外行为。

解决方案

要将内边距或边距设置为父容器高度的百分比，请避免使用 padding-top 和 margin-top。相反，设置父容器内元素的 top 或 Bottom 属性。

height: 200px;

登录后复制

}

.子元素{

position: absolute;
top: 50%;

登录后复制

}

<div>

<div>

登录后复制

说明

通过使用 top 属性，子元素的位置现在相对于父容器的高度，确保垂直对齐保持一致，无论容器的宽度如何。

以上是如何在 CSS 中使用基于父容器高度的百分比填充或边距？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章