以材料设计精简为中心的形式

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

如何使用"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;
}

调整大小时两个选项都很好用.

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-细胞 - 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>

然后从那里你可以根据需要放置全宽度列.