javascript - Angular Material 的登录表单

Question

我一直在使用 Angular Material 并阅读文档，但我似乎不知道如何设计我想要的布局。本质上，我想要一种所有元素都在一列中对齐且宽度相等的表单。例如，我还希望所有元素或包含它们的元素的最大宽度为 500px。而且它还应该在屏幕上垂直和水平居中。有什么方法可以在 Angular Material 中实现这一点吗？

Answer 1

这就是你想要实现的目标吗？ http://jsfiddle.net/hd1by95r/59/

HTML:

<div layout="row" layout-align="center center" layout-fill class="outer">
  <div layout="column" class="wrapper" flex>
    <md-input-container>
      <label>Placeholder</label>
      <input>
    </md-input-container>
    <md-input-container>
      <label>Placeholder</label>
      <input>
    </md-input-container>
    <md-button class="md-raised md-primary" flex>
      Primary
    </md-button>
  </div>
</div>

CSS:

html,
body {
  width: 100%;
  height: 100%;
}

.wrapper {
  max-width: 500px;
}

.outer {
  padding: 12px;
}