html - 如何将表格移动到页面中心

Question

我正在创建一个注册表单，我想知道如何将整个表单移动到页面的中心？现在它全部在容器的左侧，我希望它看起来有点像这样:https://id2.s.nfl.com/fans/register?returnTo=http%3A%2F%2Fweeklypickem.fantasy.nfl.com%2F

#Regcontainer {
  width: 1200px;
  margin: 70px auto;
  border: 1px solid;
  background-color: aliceblue;
  top: 0;
}

.Regcontainer h1 {
  font-size: 40px;
  font-family: 'Helvetica Neue', sans-serif;
  color: black;
  line-height: 1;
  padding-left: 35px;
  padding-top: 35px;
  color: black;
}

input {
  display: inline-block;
  margin: 10px;
}

input[type=text] {
  padding: 10px;
  border: 2px solid #212;
  border-radius: 2px;
  box-shadow: #212121;
}

input[type=password] {
  padding: 10px;
  border: 2px solid #212;
  border-radius: 2px;
  padding: 5px 10px 5px 10px;
}

input[type=submit] {
  background-color: #ff0000;
  border: 1px solid #212121;
  border-radius: 5px;
  color: aliceblue;
  font-weight: bold;
}

#back_form {
  justify-content: center;
}

<div id="Registercontainer">

  <div class="RegForm">
    <h1> </h1>

    <div id="back_glob">

      <div id="back_form">
        <form method="POST">
          <label>FIRST NAME</label>
          <input type="text" name="FName" />
          <label>LAST NAME</label>
          <input type="text" name="SNAME" />
          <br/>
          <label>EMAIL ADDRESS</label> <input id="email" name="email" type="text" />
          <BR/>
          <label>CREATE YOUR USERNAME</label> <input name="uname" type="text" /> <br/>
          <label>CREATE PASSWORD</label> <input name="pass" type="password" />


          <br/>
          <input type="submit" name="valid" value="REGISTER" />

        </form>
      </div>
    </div>
  </div>

Answer 1

这是我想出的解决方案......但它有什么作用？

#Registercontainer需要位于页面的中心。意思是，您的固定为 1200px不会工作得很好。我采取了减小容器大小的方法，以提供更好的外观和感觉，如下所示:

#Registercontainer {
    max-width: 600px;
    min-width: 320px;
    width: 100%;
    /* ... your other properties here ... */
}

另一个注意事项，您的 <label>需要for this article 中指定的属性。

如果您有任何问题，请告诉我，仅供引用，有很多方法可以帮助您完成这项工作。

#Registercontainer {
  max-width: 600px;
  min-width: 320px;
  width: 100%;
  margin: 70px auto;
  border: 1px solid;
  background-color: aliceblue;
  top: 0;
  padding: 15px;
}

.Regcontainer h1 {
  font-size: 40px;
  font-family: 'Helvetica Neue', sans-serif;
  color: black;
  line-height: 1;
  padding-left: 35px;
  padding-top: 35px;
  color: black;
}

input {
  display: inline-block;
  margin: 10px;
}

input[type=text] {
  padding: 10px;
  border: 2px solid #212;
  border-radius: 2px;
  box-shadow: #212121;
}

input[type=password] {
  padding: 10px;
  border: 2px solid #212;
  border-radius: 2px;
  padding: 5px 10px 5px 10px;
}

input[type=submit] {
  background-color: #ff0000;
  border: 1px solid #212121;
  border-radius: 5px;
  color: aliceblue;
  font-weight: bold;
}

#back_form {
  justify-content: center;
}

<div id="Registercontainer">
  <div class="RegForm">
    <h1> Register With NackStack</h1>
    <div id="back_glob">
      <div id="back_form">
        <form method="POST">
          <label for="fname">FIRST NAME</label>
          <input type="text" name="FName" id="fname" />
          <br/>
          <label for="sname">LAST NAME</label>
          <input type="text" name="SNAME" id="sname" />
          <br/>
          <label for="email">EMAIL ADDRESS</label>
          <input id="email" name="email" type="text" />
          <br/>
          <label for="uname">CREATE YOUR USERNAME</label>
          <input name="uname" type="text" id="uname" />
          <br/>
          <label for="password">CREATE PASSWORD</label>
          <input name="pass" type="password" id="password"/>
          <br/>
          <input type="submit" name="valid" value="REGISTER" />
        </form>
      </div>
    </div>
  </div>