我使用以下方法在css中创建垂直对齐方式
.base{
background-color:green;
width:200px;
height:200px;
overflow:auto;
position:relative;
}
.vert-align{
padding-top:50%;
height:50%;
}
并使用以下div结构 .
<div class="base">
<div class="vert-align">
Content Here
</div>
</div>
虽然这似乎适用于这种情况,但我惊讶的是,当我增加或减少我的基础div的宽度时,垂直对齐会突然 . 我期待当我设置padding-top属性时,它将填充占父容器高度的百分比,在我们的情况下是基数,但上面的50%的值是以百分比计算的 . 宽度 . :(
有没有办法将填充和/或边距设置为高度的百分比,而无需使用JavaScript?
8 回答
修复是的,垂直填充和边距是相对于宽度,但
top
和bottom
aren't.所以只需将div放在另一个内部,并在内部div中使用类似
top:50%
的东西(如果它仍然不起作用,请记住position
很重要)以下是模拟所需行为的两个选项 . 不是一般解决方案,但在某些情况下可能有所帮助 . 这里的垂直间距是根据外部元素的大小而不是其父元素计算的,但是这个大小本身可以相对于父元素,这样间距也是相对的 .
第一种选择:使用伪元素,这里垂直和水平间距都相对于外部 . Demo
将水平间距移动到外部元素使其相对于外部的父级 . Demo
第二种选择:使用绝对定位 . Demo
回答一个稍微不同的问题:您可以使用
vh
单位将元素填充到 viewport 的中心:要使子元素绝对位于其父元素,您需要设置父元素的相对位置和子元素的绝对位置 .
然后在子元素'top'上相对于父元素的高度 . 所以你还需要向孩子“翻译”50%的高度 .
还有一种使用柔性盒的解决方案 .
你会发现两者的优点/劣势 .
将一行文本居中的其他方法是:
要不就
50%的衬垫不会让您的孩子居中,它会将它放在中心下方 . 我认为你真的想要25%的填充率 . 也许你的内容越来越高,你的空间已经用完了?你也试过设置margin-top而不是padding-top?
编辑:没关系,w3schools网站说
也许它总是使用宽度?我从来没有注意到 .
您正在做的事情可以使用display:table(至少对于现代浏览器)来实现 . The technique is explained here .
这是一个非常有趣的错误 . (在我看来,无论如何它都是一个错误)很好找!
关于如何设置它,我会推荐Camilo Martin的答案 . 但至于为什么,我'd like to explain this a bit if you guys don' t .
在the CSS specs我发现:
......这很奇怪,但没关系 .
因此,对于父
width: 210px
和子padding-top: 50%
,我得到padding-top: 96.5px
的计算/计算值 - 这不是预期的105px
.这是因为在Windows中(我不确定其他操作系统),常见滚动条的大小是默认的
17px × 100%
(或水平条的100% × 17px
) . 那些17px
在计算50%
之前被减去,因此50% of 193px = 96.5px
.这可以通过writing-mode属性来实现 . 如果将元素的
writing-mode
设置为垂直书写模式(例如vertical-lr
),则其后代在两个维度中的填充和边距的百分比值将变为相对于高度而不是宽度 .来自spec:
inline size的定义:
例如,具有可调整大小的元素,其中水平边距相对于宽度,垂直边距相对于高度 .
在希望元素的宽高比保持不变但希望其大小与其高度而不是宽度相关的缩放比例的情况下,使用垂直书写模式尤其有用 .