如何解決這個柔性盒垂直對齊問題？

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

如何解決這個柔性盒垂直對齊問題？

回答

相關問題