Question

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

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>

Answer 1

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

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

关于弹性网格，以及一般的弹性框架的优点是，你可以在水平和垂直方向上居中。

Newbee Material Design Lite对齐

1 个答案: