html - 带有材料设计精简版的居中表格

Question

我正在使用 Google 的Material Design Lite库寻找一个易于获取以屏幕为中心的登录表单。

我已经经历了多次迭代，这是我想出的最好的：

<div class="mdl-cell--12-col mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>

    <div class="mdl-grid mdl-cell--4-col">

        <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">
            <input class="mdl-textfield__input" type="text" id="username" />
            <label class="mdl-textfield__label" for="username">Username</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">
            <input class="mdl-textfield__input" type="password" id="password" />
            <label class="mdl-textfield__label" for="password">Password</label>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>
</div>

有没有更好的方法在所有屏幕尺寸上实现居中形式？

divs 感觉真的很恶心！

Answer 1

如何使用“mdl-layout-spacer”：参见codepen

<div class="mdl-grid">
    <div class="mdl-layout-spacer"></div>
    <div class="mdl-cell mdl-cell--4-col">This div is centered</div>
    <div class="mdl-layout-spacer"></div>
</div>

或者，如果您更喜欢 css 解决方案：向包含要居中的列的网格添加一个额外的类。见代码笔

<div class="mdl-grid center-items">
    <div class="mdl-cell mdl-cell--4-col">This div is centered</div>
</div>

.mdl-grid.center-items {
  justify-content: center;
}

调整大小时，这两个选项都很好。

Answer 2

您可以使用'mdl-typography--text-center'：

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-typography--text-center">
    My center div
   </div>
</div>

Answer 3

为什么不使用mdl-cell--N-offset类？正如在https://getmdl.io/components/index.html#layout-section/grid中的组件 -> 布局 -> 网格 -> 配置选项中指出的那样：

mdl-cell--N-偏移量

在单元格前添加 N 列空白

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-cell--4-offset">
    <p>Centered content!</p>
  </div>
</div>

这应该有效。

Answer 4

只需添加这些 CSS 规则：

.mdl-layout {
  align-items: center;
  justify-content: center;
}

然后将您的内容放入此容器中：

<div class="mdl-layout">
  <!-- Your Content -->
</div>

Answer 5

我不熟悉 Google 的 Material Design Lite 库，但为什么不制作一个包装列的“容器”元素呢？例子：

CSS：

.customContainer {
    max-width: 960px;
    margin: 0 auto;
}

HTML：

<div class="customContainer">
    ...
</div>

然后从那里您可以根据需要放置全宽列。