如何解决这个柔性盒垂直对齐问题？

我正在使用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>

所以，问题是有什么好替代使用弹性盒？如果没有，那么我怎样才能让容器调整之前的 flexboxes居中的文字？

此外，这是个什么样子，当调整大小（）被调用，所以你可以看到类似的问题：

来源

2017-06-15 ColonelHedgehog

我觉得有一堆的方式，你可以解决这个问题。但是你可以使用CSS来应用min-height: 100vh。我只是把它放在.valign-wrapper上，它会将包含.fill-container的孩子居中。也适用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>

来源

2017-06-15 22:10:16

工作就像一个魅力！非常感谢你。 – ColonelHedgehog

@ColonelHedgehog真棒不客气 –

如果知道页面高度，我想简单的解决方案将补充：

$("h5").css("line-height", heights + "px");

我认为这将工作。 :)

来源

2017-06-15 22:10:31

如何解决这个柔性盒垂直对齐问题？

回答

相关问题