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

回答

相关问题