[英]vertical align with flexbox in IE11 and IE10
如何在元素垂直对齐的情况下制作跨浏览器解决方案?
http://jsfiddle.net/e2yuqtdt/3/
这适用于Firefox和Chrome,但不适用于IE11
<div class="page_login">
<div>vertical-align:center; text-align:center</div>
</div>
html, body {
height:100%;
}
.page_login {
display:flex;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
}
当居中元素高于视口高度时,背景仅为100%而不是100%滚动高度
http://jsfiddle.net/e2yuqtdt/8/
html, body {
min-height:100%;
height:100%;
}
.page_login {
display:flex;
min-height:100%;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
如何在元素垂直对齐的情况下制作跨浏览器解决方案?
看看这个小提琴: http : //jsfiddle.net/5ry8vqkL/
在那里应用的技术是使用“display:table”。 这篇文章深入介绍了该方法http://css-tricks.com/centering-in-the-unknown/
支持的浏览器可以在这里看到: http : //caniuse.com/#search=table-cell
HTML:
<div class="container">
<div id="page-login">
<div class="panel">Some content</div>
</div>
</div>
CSS:
html, body {
min-height:100%;
height:100%;
}
.container {
display: table;
height:100%;
width:100%;
background:#303030;
}
#page-login {
display: table-cell;
vertical-align: middle
}
.panel {
height: 100px;
background-color: #fff;
}
你需要为div增加一个高度。 由于您只指定了最小高度,IE会自动将其扩展到最大可能值。 所以添加一个高度,如下所示:
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
height:200px;
}
http://jsfiddle.net/e2yuqtdt/6/
由于这是一个柔性盒,因此意味着弯曲,一个好主意可能是使高度为百分比。 所以div高度 - 例如 - 页面高度的50%,除非页面高度小于200px - 那么它将是100px高。
更新 : 不幸的是,不可能只用CSS填充整个页面的div。 然而,似乎可以使用Javascript,请参阅此处使div填充剩余屏幕空间的高度
实际上 - 已经使用了它 表 申报单
http://jsfiddle.net/e2yuqtdt/14/
<div>
<div id="div1">
<div id="div2">vertical-align:center; text-align:center</div>
</div>
</div>
#div1 {
display:flex;
height:100%;
width:100%;
background:#303030;
}
#div2 {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
我知道这个更新是在elad.chen之后发布的 - 但是已经完成了这个并将其发布在下面的评论中 - 只是没有完成更新问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.