Angular material layout-align = "center center" 不工作
Angular material layout-align = "center center" not working
我正在尝试使用 layout-align = "center center",它应该将内容在垂直和水平方向居中对齐。但它只是水平而不是垂直对齐内容。
这是我正在尝试的代码的 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>
它没有垂直居中的原因是因为你的 div 包含 layout-align 属性没有高度。
试试
<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>
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>
只需使用
fxLayout="row" fxLayoutAlign="center center" style="height: 100vh; width: 100vh"
在你的 parent div
我正在尝试使用 layout-align = "center center",它应该将内容在垂直和水平方向居中对齐。但它只是水平而不是垂直对齐内容。
这是我正在尝试的代码的 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>
它没有垂直居中的原因是因为你的 div 包含 layout-align 属性没有高度。
试试
<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>
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>
只需使用
fxLayout="row" fxLayoutAlign="center center" style="height: 100vh; width: 100vh"
在你的 parent div