[英]in css3, use calc() to center vertically with vh and vw
在什么必须是一个广泛使用的情况下,使用vh
作为div
高度,并使用vm
作为字体大小。
div.outer { height: 20vh; }
div.inner { font-size: 3vw; height: auto; }
div.inner2 { font-size: 2vw; }
<div.outer>
<div.inner>center me!</div>
</div>
<div.outer>
<div.inner>center me top!</div>
<div.inner2>center me bottom!</div>
</div>
有没有办法使用calc()
和其他css3
属性垂直居中div.inner
内的div.outer
?
如果你只使用一行,你可以使用line-height: 20vh;
。
最好的办法是使用顶部填充,这不是未来的证明。
可悲的是, calc()
无法与 vh
, vm
在Chrome上运行(已修复2014-04-30)
我知道这不是你确切问题的答案,尽管我认为我会把它作为一种可能的选择。
我目前正在处理垂直对齐问题,直到最近才依赖讨厌的javascript计算来完成工作! 如果隐藏元素或父元素,则会失败。
如果你使用CSS3很好,我建议你看看盒子对齐吗? 它似乎为我做了伎俩。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.