我正在使用 Materialise 框架。效果很好,但我想让所有页面都填满窗口(使用最小高度)。这似乎搞砸了元素的垂直对齐。
这是我正在使用的 CSS 代码:
.valign-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
这就是我用来调整元素大小以便它们填满窗口的方法。
function resize() {
var heights = window.innerHeight;
$(".fill-container").each(function () {
$(this).css("min-height", heights + "px");
});
}
resize();
window.onresize = function () {
resize();
};
这是我想要在保持垂直对齐(水平对齐)的同时匹配窗口高度的示例:
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container fill-container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
</div>
<div class="parallax"><img src="img/background3.jpg" alt="Unsplashed background img 3"></div>
</div>
所以问题是是否有一个很好的替代使用 flex 盒子的方法?如果不是,那么如何让容器在 flexbox 将文本居中之前调整大小?
此外,这是调用 resize() 时的样子,因此您可以看到问题:
最佳答案
我认为有很多方法可以解决这个问题。但是您可以只使用 CSS 来应用 min-height: 100vh
。我只是把它放在 .valign-wrapper
上,它将使包含 .fill-container
的 child 居中。还应用 justify-content: center
水平居中(根据您的屏幕截图)
.valign-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
min-height: 100vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"/>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container fill-container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
</div>
<div class="parallax"><img src="img/background3.jpg" alt="Unsplashed background img 3"></div>
</div>
关于javascript - 如何解决这个 flex-box 垂直对齐问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44577738/