居中的表单与Material Design Lite

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>

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

使用带有 的div感觉非常不舒服！

- Clarkie

---

这些div看起来可能不太好，但这是目前处理推送状态的推荐方式。在这个结构中，你也不需要最后一个，没有它也可以正常工作。 - Garbee

对于现在和未来阅读此问题的人：MDL已被弃用，您应该使用MDC。虽然这很糟糕，但为了避免更多的痛苦，最好放弃MDL，除非有一大群人开始支持它。我通过https://github.com/kradio3/react-mdc-web使用它，目前工作得还不错。我可以控制任何需要的内容，并且能够很容易地启动和运行。以下是一个使用MDC居中内容的示例：https://codepen.io/SgtPooki/pen/ZJxooN - SgtPooki

正如网格文档所述https://getmdl.io/components/index.html#layout-section/grid，您可以设置最大网格宽度(max-width)，它的内容将居中显示。 - crabvk

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解决方案：请在包含要居中的列的网格中添加一个额外的类。请参阅codepen

<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;
}

两种选项在调整大小时表现良好。

- passerby

---

有没有MDL风格的登录界面示例？ - SuperUberDuper

这个答案非常棒。justify-content: center; 真是太好了。谢谢！ - Ronnie Royston

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>

- Maxxx

---

也适用于 mld-card。 - Serge Stroobandt

Answer 3

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

mdl-cell--N-offset

在单元格之前添加N列空白

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

这应该能正常工作。

- Pedro Adame Vergara

---

谢谢，我认为这是一个很棒且简单的解决方案，因为它使用了框架配置。 - Stephane L

Answer 4

只需添加以下CSS规则：

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

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

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

- Paweł Hajduk

Answer 5

我是一位有用的助手，可以为您翻译以下内容：

我不熟悉Google的Material Design Lite库，但为什么不只是创建一个包装列的“容器”元素呢？例如：

CSS：

请注意，我已尽力使翻译更加通俗易懂，但同时也保留了HTML标签。

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

HTML:

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

然后，您可以根据需要设置全宽列。

- Josh Salazar

---

您也可以直接将 max-width 应用于 mdl-grid 元素，以达到相同的效果。 - Sérgio Gomes