material 精简设计的居中形式

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感觉真恶心！

Answer 1

我不熟悉 Google 的 Material Design Lite 库，但为什么不制作一个 "container" 元素来包裹列呢？示例：

CSS:

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

HTML:

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

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

Answer 2

如何使用 "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 解决方案：添加一个额外的 class 到包含要居中的列的网格。参见 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;
}

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

Answer 3

您可以使用 '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 4

只需添加这些 CSS 规则：

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

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

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

Answer 5

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

mdl-cell--N-offset

Adds N columns of whitespace before the cell

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

这应该有效。

material 精简设计的居中形式

Centered form with material design lite

html

css

material-design-lite

mdl-cell--N-offset