CSS段落定位不正确

Question

嘿伙计们我的style.css有问题 实际上我希望信息消息居中，但它只是悬挂在我身边的左侧......

这是一张图片：

这是我的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%;
}

在这里我的表格：

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

如果有人能帮助我会很棒。

Answer 1

信息消息段落不在您上面粘贴的html中 - 如果您希望它居中，请确保它位于form标记内。否则，请将其margin: 10px auto;代替margin: 10px;，然后您就可以了。

margin: 10px;是margin: 10px 10px 10px 10px;的简写属性 - top，right，bottom，left（TRouBLe）意味着您的.info段从顶部和左侧获得10px而右侧是设置为自动隐式。

margin: 10px auto;是margin: 10px auto; 10px auto的简写属性，因此您将元素边距10px顶部和底部以及左侧设置为auto - 一旦设置了显式宽度，它将居中任何块元素它。

Answer 2

尝试实施以下代码

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

Answer 3

它以这种方式工作，因为此按钮https://www.screencast.com/t/4VldbfP82LS2不合适。在表单上我们有text-align：center;

Answer 4

看看css flex alignment。它是负责任地布局元素的最直观方式： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

如果您希望将任何内容放置在屏幕中央，请将其margin属性设置为auto。