Search code examples
javascripthtmlcssformsmessage

CSS Paragraph is not positioned correctly

Hey guys i have a problem with my style.css Actually i want the info message to be centered but its just hanging at the left side of my side...

Here a picture:

enter image description here

Here my CSS: 

*{
    font-family: arial;
}

#title{
    color: dodgerblue;
}

form{
    text-align: center;
    width: 100%;
}

form input{
    margin: 10px;
    width: 100%;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid lightblue;
}

#textfield{
    padding: 10px;
    width: 30%;
}

#submitButton{
    width: 30%;
    color: white;
    padding: 10px;
    background-color: dodgerblue;
}

#submitButton:hover{
    padding: 11px;
    background-color: royalblue;
}

#info{
    border-radius: 3px;
    background-color: dodgerblue;
    color:lightblue;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 10px;
    width: 30%;
}

and here my Form:

<form>
  <h2 id="title">Registration</h2>
  <label>
    <input type="text" id="textfield" defaultValue={this.props.user.username} placeholder="Username" ref="username" onChange={this.handleUsername.bind(this)} required/>
  </label><br/>
  <label>
    <input type="password" id="textfield" defaultValue={this.props.user.password} placeholder="Password" ref="password" onChange={this.handlePassword.bind(this)} required/>
  </label><br/>
  <label>
    <input type="password" id="textfield" defaultValue {this.props.user.password} placeholder="Repeat Password" ref="password2" required/>
  </label><br/>
  <label>
    <input type="text" id="textfield" defaultValue={this.props.user.firstname} placeholder="Firstname" ref="firstname" onChange={this.handleFirstname.bind(this)} required/>
  </label><br/>
  <label>
    <input type="text" id="textfield" defaultValue={this.props.user.lastname} placeholder="Lastname" ref="lastname" onChange={this.handleLastname.bind(this)} required/>
  </label><br/>
  <label>
    <input type="email" id="textfield" defaultValue={this.props.user.email} placeholder="Email" ref="email" onChange={this.handleEmail.bind(this)} required/>
  </label><br/>
  <label>
    <a href="/login">Already have an account?</a>
  </label><br/>
  <input type="button" value="Submit" id="submitButton" onClick={this.handleFormSubmit.bind(this)}/>   
  {info}
</form>

Would be great if anyone could help me.

Solution

  • The info message paragraph is not in the html you pasted above - if you want it centered, make sure it goes inside the form tags. Otherwise give it margin: 10px auto; instead of margin: 10px; and you're good to go.

    margin: 10px; is a shorthand property for margin: 10px 10px 10px 10px; - top, right, bottom, left (TRouBLe) meaning that your .info paragraph gets 10px from top and left and the the right one is set to auto implicitly.

    margin: 10px auto; is a shorthand property for margin: 10px auto; 10px auto, so you give the element margin 10px top and bottom and left right is set to auto - it will center any block element once you set an explicit width on it.