时间戳

首页 > 解决方案 > 如何使用具体化类居中表单元素

css - 如何使用具体化类居中表单元素

问题描述

我有这样的表格：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
    <div class="row">
        <form class="col s12" onSubmit={formSubmit}>
            <h2>Login</h2>
            <div class="row">
                <div class="input-field col s10">
                    <label for="username">Username</label>
                    <input name="username" type="text" />
                </div>
            </div>
            <div class="row">
                <div class="input-field col s10">
                    <input name="password" type="password" />
                    <label for="password">Password</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s10">
                    <input type="submit" value="submit" class="btn waves-effect waves-light" />
                </div>
            </div>
        </form>
        <p>Don't have an account? <strong><a href="/register">Register</a></strong></p>
    </div>
</div>

我想将 .container 中的表单输入字段水平居中div并左对齐h3并提交button这些输入字段，但无法弄清楚如何使用 Materialize 帮助程序和内置网格类来做到这一点。我试过 .center-align 但根据文档，它仅适用于文本。我在网格系统的工作方式上遗漏了一些东西。提前致谢！

标签： cssmaterialize

解决方案

在使用Materialize时，您可以使用推/拉的网格实用程序来居中您的col.

解释：

如果你有col s8，那么剩下columns的row就是4所以要居中它应该在col s2之前col s8。

现在， will之前push-s2的作用是空的，所以它会居中。col s2col s8

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
    <div class="row">
        <form class="col s8 push-s2" onSubmit={formSubmit}>
            <h2>Login</h2>
            <div class="row">
                <div class="input-field col s12">
                    <label for="username">Username</label>
                    <input name="username" type="text" />
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input name="password" type="password" />
                    <label for="password">Password</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input type="submit" value="submit" class="btn waves-effect waves-light" />
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                 <p>Don't have an account? <strong><a href="/register">Register</a></strong></p>
                </div>
            </div>
        </form>
    </div>
</div>

这种方式的缺点

你不能用奇数col（即：）这样做，col s7因为剩下columns的row就是5并且col s2.5两者都没有push-s2.5。

我的意见

<div class='row'>从上方移除form并从表单内部移除 class='col s12'，您可以使用max-widthwithmargin: 0 auto居中form然后保持其他所有内容不变，请参见下文：

.main-form {
    max-width: 700px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .main-form {
        max-width: 100%;
    }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
        <form class="main-form" onSubmit={formSubmit}>
            <h2>Login</h2>
            <div class="row">
                <div class="input-field col s12">
                    <label for="username">Username</label>
                    <input name="username" type="text" />
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input name="password" type="password" />
                    <label for="password">Password</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input type="submit" value="submit" class="btn waves-effect waves-light" />
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                 <p>Don't have an account? <strong><a href="/register">Register</a></strong></p>
                </div>
            </div>
        </form>
</div>

推荐阅读