2017-02-13 5 views
0

Hey Jungs positioniert ich habe ein Problem mit meinem style.css Eigentlich möchte ich die Info-Meldung zentriert werden, aber es ist nur auf der linken Seite von meiner Seite hängen ...CSS Absatz ist nicht richtig

hier ein Bild:

enter image description here

hier ist meine 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%; 
} 

und hier meine Form:

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

Wäre toll, wenn mir jemand helfen könnte.

Antwort

1

Der Info-Nachricht-Absatz ist nicht in dem HTML-Code, den Sie oben eingefügt haben - wenn Sie möchten, dass er zentriert ist, stellen Sie sicher, dass er in die form Tags passt. Ansonsten gib es margin: 10px auto; statt margin: 10px; und du bist gut zu gehen.

margin: 10px; ist eine zusammenfassende Eigenschaft für margin: 10px 10px 10px 10px; - oben, rechts, unten, links (TROUBLE), was bedeutet, dass Ihr .info Absatz von oben 10px wird und nach links und das die richtigen ist auf auto implizit gesetzt.

margin: 10px auto; ist eine Kurzschrift-Eigenschaft für margin: 10px auto; 10px auto, so geben Sie das Element Rand 10px oben und unten und links rechts ist auf automatisch gesetzt - es zentriert jedes Blockelement, sobald Sie eine explizite Breite darauf setzen.

0

Versuchen Sie den Code unten

#info 
{ 
margin:0 auto; 
text-align:center; 
} 
0

Wenn Sie etwas wollen, in der Mitte des Bildschirms platziert werden, dann setzen Sie die CSS-Eigenschaft auf marginauto.