Angular material layout-align =「center center」not working

我試圖使用layout-align =「center center」，它應該將內容垂直和水平對齊。但它只是水平對齊內容而不是垂直對齊。Angular material layout-align =「center center」not working

這是我正在嘗試的代碼的plnkr link。

<body ng-app="app" ng-controller="appCtrl"> 
<md-toolbar> 
<div class="md-toolbar-tools"> 
    <h2 flex>Hello Angular-material!</h2> 
</div> 
</md-toolbar> 
<div class="flexbox-parent"> 
    <div layout="row" layout-align="center center"> 
    <div flex="15">First line</div> 
    <div flex="15">Second line</div> 
    </div> 
</div> 
</body>

來源

2015-11-19 Prabhdeep

這可能是因爲它使用flexbox ...也許是與您的瀏覽器兼容性問題？你可以看看http://caniuse.com/ –

我不明白，你想要[this]（http://imgur.com/aQ9DNu5）這樣的東西？ – AndreaM16

它不垂直居中的原因是因爲包含layout-align屬性的div沒有高度。

嘗試像

<div class="flexbox-parent"> 
    <div layout="row" layout-align="center center" style="min-height: 500px"> 
    <div flex="15">First line</div> 
    <div flex="15">Second line</div> 
    </div> 
</div>

來源

2015-11-19 22:18:33

如何在瀏覽器的整個視口上進行對中？ –

@Prabhdeep：我的div與layout-align在px中有最小高度。它仍然不適合我。 – Mak

如果你在jsfiddle中運行上面的代碼，它工作得很好，請確保你沒有其他的類或樣式覆蓋你的元素。 –

Flexbox的垂直居中與定義父元素高度行之有效：

<div class="flexbox-parent"> 
    <div layout="row" layout-align="center center" style="height: 100vh"> 
    <div flex="15">First line</div> 
    <div flex="15">Second line</div> 
    </div> 
</div>

來源

2017-05-06 06:08:37

只需使用

fxLayout="row" fxLayoutAlign="center center" style="height: 100vh; width: 100vh"

你的父母DIV

來源

2017-09-26 19:35:39 smedasn

這個問題是與Angular.js/angular-material 1.x有關。您使用的Angular 2+語法可能會混淆一些人。 – Nerman

Angular material layout-align =「center center」not working

回答

相關問題