Angular Material如何对齐布局中心答案

【问题标题】：Angular Material how to align layout centerAngular Material如何对齐布局中心
【发布时间】：2017-05-28 06:41:53
【问题描述】：

我有这个直接从角度材料网站出来的网站，因为我在角度材料柔性布局方面遇到了很多麻烦。

根据关于layout container的文档项目排成一排。 max-height = 100% 并且 max-width 是容器中项目的宽度。

我尝试了文档page中提供的示例

    <div ng-app="myapp" ng-cloak>

<div layout="row" layout-align="center center">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

</div>

我的内容应该在中心垂直和水平对齐。但我的内容是水平对齐而不是垂直对齐。

我有代码示例here

【问题讨论】：

问题是外部 div 没有固定的宽度和高度给它 100% 的宽度和高度。

标签： css angularjs typescript angular-material material-design

【解决方案1】：

<div layout-fill ng-app="myapp" ng-cloak>

<div layout="row" layout-fill layout-align="center center">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

</div>

请在需要占用所有空间的容器上应用布局填充

【讨论】：