パーセンテージベースの垂直パディングが失敗するのはなぜですか? CSS で垂直方向の位置合わせにパーセンテージの高さを使用するにはどうすればよいですか?

親コンテナの高さのパーセンテージを使用してパディングとマージンを制御する方法

CSS では、padding-top を使用して垂直方向の配置を制御できます。財産。ただし、このプロパティを親コンテナの高さではなく幅のパーセンテージとして設定すると、望ましくない動作が発生する可能性があります。

元の試行:

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

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

予期せぬ動作動作:

.base の幅を変更する場合コンテナでは、padding-top がパーセンテージとして設定されているにもかかわらず、垂直方向の配置がスナップされました。これは、垂直方向のパディングとマージンが親コンテナの幅のパーセンテージとして計算されるためです。

解決策:

padding-top を使用する代わりに、top プロパティを使用して、垂直方向の位置合わせを制御します。 top は親コンテナの高さのパーセンテージとして計算されます。

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

.vert-align {
  position: absolute;
  top: 50%;
}

このネストされた div 構造は、親コンテナ内に子 div を配置し、垂直方向に配置します。

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

top を使用することでpadding-top の代わりに、子 div は、幅に関係なく、親コンテナの上部から 50% 下に配置されます。これにより、親の幅が変更された場合でも垂直方向の位置合わせが保証されます。

以上がパーセンテージベースの垂直パディングが失敗するのはなぜですか? CSS で垂直方向の位置合わせにパーセンテージの高さを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。