如何使用 materialize 类居中表单元素

Question

我有这样的表格：

<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 与这些输入字段，但不知道如何使用 Materialise 助手和内置网格类来完成。我试过 .center-align 但根据 docs 它仅适用于文本。我在网格系统的工作原理上遗漏了一些东西。提前致谢！

Answer 1

同时使用 Materialize you can use the grid utility of 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 没有 col s2.5 也没有 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>

如何使用 materialize 类 居中表单元素

How to center form elements with materialize classes

css

materialize

如何使用 materialize 类居中表单元素