Html 使用材料设计精简版的居中形式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31463632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centered form with material design lite
提问by Clarkie
I am looking for an easy to get a login form centered on the screen using Google's Material Design Litelibrary.
我正在寻找一种易于使用 Google 的Material Design Lite库以屏幕为中心的登录表单。
I've been through a number of iterations and this is the best I've come up with:
我已经经历了多次迭代，这是我想出的最好的：
<div class="mdl-cell--12-col mdl-grid">
<div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet"> </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"> </div>
</div>
Is there a better way of achieving a centered form on all screen sizes?
有没有更好的方法可以在所有屏幕尺寸上实现居中的表单？
The divs with feel really yucky!
带有 div 的 感觉真的很恶心！
回答by passerby
How about using "mdl-layout-spacer": See codepen
如何使用“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>
Or if you prefer a css solution: Add an extra class to the grid containing the column to be centered. See codepen
或者，如果您更喜欢 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;
}
Both options play nice when resizing.
调整大小时，这两个选项都很好。
回答by Maxxx
You can use 'mdl-typography--text-center':
您可以使用'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>
回答by Pedro Adame Vergara
Why not using mdl-cell--N-offsetclass? As pointed on the Components -> Layout -> Grid -> Configuration options in https://getmdl.io/components/index.html#layout-section/grid:
为什么不使用mdl-cell--N-offset类？正如https://getmdl.io/components/index.html#layout-section/grid 中的组件 -> 布局 -> 网格 -> 配置选项所指出的：
mdl-cell--N-offset
Adds N columns of whitespace before the cell
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>
This should work.
这应该有效。
回答by Pawe? Hajduk
Just add these CSS rules:
只需添加这些 CSS 规则：
.mdl-layout {
align-items: center;
justify-content: center;
}
and then put your content in this container:
然后将您的内容放入此容器中：
<div class="mdl-layout">
<!-- Your Content -->
</div>
回答by Josh Salazar
I'm not familiar with Google's Material Design Lite library, but why not just make a "container" element wrapping the columns? Example:
我不熟悉 Google 的 Material Design Lite 库，但为什么不制作一个包裹列的“容器”元素呢？例子：
CSS:
CSS：
.customContainer {
max-width: 960px;
margin: 0 auto;
}
HTML:
HTML：
<div class="customContainer">
...
</div>
Then from there you can put the full width column as desired.
然后从那里您可以根据需要放置全宽列。
