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

如何使用＆＃34; mdl-layout-spacer＆＃34;：见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课程？正如组件中指出的那样 - ＆gt;布局 - ＆gt;网格 - ＆gt; 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>

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

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

5 个答案:

MDL-细胞 - N的偏移