以材料设计lite为中心的形式

作者

我正在寻找一个易于获得的登录表单集中在屏幕上使用谷歌的材料设计Lite库

我已经经历了多次迭代，这是我想到的最好的：

&lt；div class=“mdl单元格--12列mdl网格”&gt；
&lt；div class=“mdl细胞mdl细胞——4-柱mdl细胞——2-柱片剂”&gt&amp；nbsp&lt/部门&gt；
&lt；div class=“mdl网格mdl单元--4列”&gt；
&lt；div class=“mdl textfield mdl js textfield mdl-cell-12-col”&gt；
&lt；input class=“mdl-textfield\uu input”type=“text”id=“username”/&gt；
&lt；label class=“mdl-textfield\uu label”for=“username”&gt；用户名&lt/标签&gt；
&lt/部门&gt；
&lt；div class=“mdl textfield mdl js textfield mdl-cell-12-col”&gt；
&lt；输入class=“mdl-textfield\uu输入”type=“password”id=“password”/&gt；
&lt；label class=“mdl-textfield\uu label”for=“password”&gt；密码&lt/标签&gt；
&lt/部门&gt；
&lt/部门&gt；
&lt；div class=“mdl细胞mdl细胞——4-柱mdl细胞——2-柱片剂”&gt&amp；nbsp&lt/部门&gt；
&lt/部门&gt；

是否有更好的方法在所有屏幕尺寸上实现居中窗体

带的div&amp；nbsp感觉真恶心

使用“mdl布局间隔器”如何：参见代码笔

&lt；div class=“mdl网格”&gt；
&lt；div class=“mdl布局间隔器”&gt&lt/部门&gt；
&lt；div class=“mdl单元mdl单元--4列”&gt；该分区居中&lt/部门&gt；
&lt；div class=“mdl布局间隔器”&gt&lt/部门&gt；
&lt/部门&gt；

或者，如果您更喜欢css解决方案：
向包含要居中的柱的轴网中添加额外的类。见代码笔

&lt；div class=“mdl网格中心项目”&gt；
&lt；div class=“mdl单元mdl单元--4列”&gt；该分区居中&lt/部门&gt；
&lt/部门&gt；
.mdl-grid.center-items{
证明内容：中心；
}

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

相关文章：

  1. 如何使浮动元素居中？
  2. 用于Firefox的自定义CSS滚动条
  3. 大纲对文本的影响
  4. 如何调整单个flexbox项（覆盖调整内容）[重复]

发表评论

© 2026 开发百科-程序代码问答平台 • Built with