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

尝试实现下面的代码

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

Answer 2

它之所以这样工作是因为这个按钮 https://www.screencast.com/t/4VldbfP82LS2 不合时宜。在表格上我们有 text-align: center;

Answer 3

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

margin: 10px; 是 shorthand 属性对于 margin: 10px 10px 10px 10px; - 上、右、下、左（麻烦）意味着你的 .info 段落得到 10px从顶部和左侧以及右侧隐式设置为自动。

margin: 10px auto; 是 shorthand 属性 for margin: 10px auto; 10px auto，所以你给元素 margin 10px top and bottom and left right set to auto - it will center任何块元素，一旦你在其上设置了明确的宽度。

Answer 4

看看 css 弹性对齐。这是响应式布局元素的最直观方式： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

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

CSS 段落位置不正确

CSS Paragraph is not positioned correctly

html

javascript

css

forms

message