私は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 を使用せずに、パディングやマージンを高さのパーセンテージとして設定する方法はありますか?
ベストアンサー1
修正方法は、はい、垂直方向のパディングとマージンは幅に相対的ですが、topはbottom そうではありません。
したがって、div を別の div 内に配置し、内側の div では次のようなものを使用しますtop:50%(positionそれでも動作しない場合は、この点に注意してください)。