[英]in css3, use calc() to center vertically with vh and vw
in what has to be a widely used case, using vh
for height of a div
, and using vm
for font size. 在什么必须是一个广泛使用的情况下,使用
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>
is there any way to use calc()
and other css3
properties to vertically center the div.inner
within the div.outer
? 有没有办法使用
calc()
和其他css3
属性垂直居中div.inner
内的div.outer
?
If you only use one line you can use line-height: 20vh;
如果你只使用一行,你可以使用
line-height: 20vh;
. 。
The best thing to do which isn't future proof is to use top padding. 最好的办法是使用顶部填充,这不是未来的证明。
Sadly calc()
didn't work with vh
, vm
on Chrome (it was fixed 2014-04-30) 可悲的是,
calc()
无法与 vh
, vm
在Chrome上运行(已修复2014-04-30)
I know this is not an answer to your exact question, though I thought I'd mention it as a possible alternative. 我知道这不是你确切问题的答案,尽管我认为我会把它作为一种可能的选择。
I'm currently tackling a vertical alignment issue myself and until recently had relied on nasty javascript calculations to get the job done! 我目前正在处理垂直对齐问题,直到最近才依赖讨厌的javascript计算来完成工作! This falls over if the element or parent elements are hidden.
如果隐藏元素或父元素,则会失败。
If you are fine using CSS3, might I suggest looking into box-align? 如果你使用CSS3很好,我建议你看看盒子对齐吗? It seems to do the trick for me.
它似乎为我做了伎俩。
http://www.w3schools.com/cssref/css3_pr_box-align.asp http://www.w3schools.com/cssref/css3_pr_box-align.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.