Newbee 材料设计精简版对齐答案

【问题标题】：Newbee Material Design Lite AlignNewbee 材料设计精简版对齐
【发布时间】：2017-05-01 19:20:50
【问题描述】：

我正在尝试构建一个简单的登录页面，类似于 pintrest 登录。我有 Facebook/Google+ 和 2 个用于用户/通行证的文本框。一个按钮，用于对用户进行身份验证。我尝试使用 MDT 卡，但它总是显示在右上角，而不是在浏览器的中心。我想知道如何做到这一点。另一个问题是，当用户通过身份验证时，如果找不到用户，我想显示一条错误消息。我有一个 sn-p 代码，其中的字段很少。

html>   
    <body>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
        <link rel="stylesheet" href="material.min.css">
        <script type="text/javascript">
            var button = document.createElement('button');
            var textNode = document.createTextNode('Click Me!');
            button.appendChild(textNode);
            button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
            componentHandler.upgradeElement(button);
            document.getElementById('container').appendChild(button);
        </script>
    <div class="mdl-layout mdl-js-layout mdl-color--grey-100">
    <main class="mdl-layout__content">
        <div class="mdl-card mdl-shadow--6dp">
            <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
                <h2 class="mdl-card__title-text">Login</h2>
            </div>
        <div class="mdl-card__supporting-text">
                <form action="#">
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="text" id="email" />
                        <label class="mdl-textfield__label" for="email">Email</label>
                    </div>
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="password" id="userpass" />
                        <label class="mdl-textfield__label" for="userpass">Password</label>
                    </div>
                </form>
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Sign In </button>
            </div>
        </div>
    </main>
</div>
    </body>
</html>

【问题讨论】：

为什么会有两个<body>标签？
谢谢 Neil 我会研究 Flexbox，我在 Polymer 中看到了 display: flex，但不确定 MDL 是否支持它。

标签： css material-design

【解决方案1】：

我对 MDL 不是很熟悉，您的代码可能会使用一些 TLC，但我相信您正在寻找的（至少是最简单的方法） 是 Flexbox。

更具体地说，弹性网格系统将是最有帮助的。我不确定，但我认为 MDL 甚至没有网格系统。 Foundation 和 Bootstrap 都有可以使用的弹性网格系统。 （我更喜欢 Foundation 的） 还有很多独立的网格框架可以搭配任何东西。

关于 flex 网格和真正的 flexbox 的好处是，您几乎可以水平和垂直居中任何东西。

【讨论】：

谢谢@Neil Smith 我会研究 Flexbox，我在 Polymer 中看到了 display: flex，但不确定 MDL 是否支持它。另外，如果我必须选择一个 UI 框架，那么 Bootstrap 或 Foundations 会更容易吗？我正在尝试将 Node/Express 用于中间件/服务器端开发。
我爱基金会！在我看来，它是最完整、最易用、最强大的 CSS 框架。它还具有易于覆盖的样式、非常深入的文档、一个很棒的社区，并且如果您想自定义它，还可以包含 Sass 文件。它以 css 和 js（用于手风琴和轮播等）文件的形式出现，因此在 Node 上应该没问题。