以材料设计精简为中心的形式 [英] Centered form with material design lite
问题描述
我正在寻找一种使用Google的 Material Design Lite 库以屏幕为中心的登录表单。
I am looking for an easy to get a login form centered on the screen using Google's Material Design Lite library.
我经历了许多次迭代,这是我得到的最好结果:
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?
具有& nbsp;
的div感觉真的很糟糕!
The divs with
feel really yucky!
推荐答案
如何使用mdl-layout-spacer:请参阅 codepen
How about using "mdl-layout-spacer": See 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
Or if you prefer a css solution: Add an extra class to the grid containing the column to be centered. See 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;
}
这两个选项在调整大小时都会很好。
Both options play nice when resizing.
这篇关于以材料设计精简为中心的形式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!