如何使用具体化类居中表单元素答案

【问题标题】：How to center form elements with materialize classes如何使用具体化类居中表单元素
【发布时间】：2021-01-14 10:10:46
【问题描述】：

我有这样的表格：

<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 但根据 docs 它仅适用于文本。我在网格系统的工作方式上遗漏了一些东西。提前致谢！

【问题讨论】：

我认为您使用的是 React 或 Angular，因为在 HTML 中没有 className 它是 class，如果为真；最好将className 更改为class 以进行工作演示，以便人们提供帮助。我已经在您的问题中添加了 MaterializeCDN。
谢谢，我会修改的
您是否希望将整个表单居中？或者您想将表单内的元素居中，但表单是否居中？
顺便说一句，您忘记更改 className="container" 和 className="row"
我想使整个表格居中。但保持提交按钮与用户名和密码输入字段左对齐 - 顺便更新了 col 大小以更好地展示

标签： css materialize

【解决方案1】：

使用Materialize 时，您可以使用push/pull 的网格实用程序将col 居中。

说明：

如果您有col s8，则此row 的剩余columns 为4，因此要居中，col s2 应位于col s8 之前。

现在，push-s2 将在col s8 之前充当空的col s2，因此它将居中。

<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）这样做，因为这个 row 的剩余 columns 是 5 并且没有 @ 987654337@既不是push-s2.5。

我的意见

从上面的form 中删除<div class='row'> 并从表单内部删除class='col s12'，而不是您可以使用max-width 和margin: 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>

【讨论】：