我使用以下方法在css中创建垂直对齐方式
.base{
background-color:green;
width:200px;
height:200px;
overflow:auto;
position:relative;
}
.vert-align{
padding-top:50%;
height:50%;
}Run Code Online (Sandbox Code Playgroud)
并使用以下div结构.
<!-- and used the following div structure. -->
<div class="base">
<div class="vert-align">
Content Here
</div>
</div>Run Code Online (Sandbox Code Playgroud)
虽然这似乎适用于这种情况,但我感到惊讶的是,当我增加或减少我的基础div的宽度时,垂直对齐会突然.我期待当我设置padding-top属性时,它将填充占父容器高度的百分比,这在我们的情况下是基数,但是上面的50%的值是以百分比计算的.宽度.:(
有没有办法将填充和/或边距设置为高度的百分比,而无需使用JavaScript?
我正在开发一个项目,客户希望导航<div>根据屏幕高度进行对齐,类似于margin-left屏幕宽度减小时百分比的工作方式.
所以,我给了margin-top: 20%导航<div>显示边距,但是当我减小窗口的高度时,它不会根据屏幕高度调整,尽管它在我减小屏幕宽度时起作用.
我的问题不是如何实现这一目标,而是为什么百分比水平而非垂直?