How to center form elements with materialize classes

Question

I have a form like this:

<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>

I want to horizontally center the form input fields within the .container div and left align the h3 and submit button with those input fields but can't figure out how to do it using Materialize helpers and built-in grid classes. I've tried .center-align but as per the docs its only for text. I'm missing something in how the grid system works. Thanks in advance!

Answer 1

While using Materialize you can use the grid utility of push/pull to center your col.

Explanation:

If you have col s8, then the remaining columns for this row is 4 so to center it there should be col s2 before col s8.

Now, push-s2 will acts as an empty col s2 before col s8 so it will be centered.

<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>

Disadvantages of this way

You can't do this way with an odd col number (ie: col s7) because then the remaining columns for this row is 5 and there is no col s2.5 neither push-s2.5.

My Opinion

Remove <div class='row'> from above form and remove class='col s12' from inside the form, instead you can use max-width with margin: 0 auto to center the form then keep everything else as is, see below:

.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>