Angular Material如何对齐布局中心

Posted 2023-03-13

【中文标题】Angular Material如何对齐布局中心

【英文标题】：Angular Material how to align layout center

【发布时间】：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% 的宽度和高度。

【参考方案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>

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