Can't center the form with materialize

HTML-CSS
1

hello,
i am using materialize in a project of mine, but i can’t center the form for some reason
i used center-align class in the form but it only work on the header and submit button, and i want the inputs to center too.

here is my code:

<div className="container">
            <div className="preloader-wrapper active big">
              <div className="spinner-layer spinner-blue-only">
                <div className="circle-clipper left">
                  <div className="circle"></div>
                </div><div className="gap-patch">
                  <div className="circle"></div>
                </div><div className="circle-clipper right">
                  <div className="circle"></div>
                </div>
              </div>
            </div>
            <form onSubmit={this.submit} className="center-align col s12 ">
              <h1>Sign Up</h1>
              <div className="row">
                <div className="input-field col s12 m6">
                  <input id="user_name" type="text" name='username' onChange={this.getInput} required/>
                  <label htmlFor="user_name">Username</label>
                  <span className="helper-text">Only numbers and letters</span>
                </div>
              </div>
              <div className="row">
                <div className="input-field col s12 m6">
                  <input id="user_email" type="email" name="email" onChange={this.getInput} required/>
                  <label htmlFor="user_email">Email</label>
                </div>
              </div>
              <div className="row">
                <div className="input-field col s12 m6">
                  <input id="user_password" type="password" name="password" onChange={this.getInput} required/>
                  <label htmlFor="user_password">Password</label>
                  <span className="helper-text">Must be 12 characters, letters and numbers</span>
                </div>
              </div>  

              <button className="btn waves-effect waves-light" type="submit" name="action">Submit</button>

            </form>
          </div>

any solution would be great.

2

Hi,

Don’t you need a .row container wrapping you div and your form?

3

i know that’s what the documentation said, i added it but it’s still not working it only centers the h1 and the button
i am stuck in this.

4

I see,

I looked quickly at the materialize docs and what happens is that the class .center-align is just a helper class which brings the property text-align: center, so your block content will not be affected.

What I would do: I would remove all the .m6 classes from your input wrapper and add it in the form className with offset-m3 class too.

Test it, and let me know if it worked well.

1 Like
5

Yes it works!!!, Thank you so much.
learned a new thing today ^^

1 Like