如何将表单移动到页面中央

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>

- Ahmed

---

http://howtocenterincss.com/ - Marko Gresak

这个 id="Registercontainer" 与这个 #Regcontainer 不匹配。 - Paulie_D

Answer 1

我想到了以下解决方案……但它是用来做什么的？ #Registercontainer需要在页面中央。这意味着，您的固定宽度为1200px将不会起作用。我采用了减小表单容器大小的方法，使其外观和感觉更好，如下所示：

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

另外需要注意的是，您的<label>需要像这篇文章中指定的那样具有for属性。

如果您有任何问题，请告诉我，顺便说一句，有很多方法可以为您实现此功能。

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

- AGE

Answer 2

在父级 <div> 中添加 margin:auto 和一个固定宽度。示例：

<div id="Registercontainer" style="margin-left:auto;margin-right:auto;width:250px">

Fiddle: https://jsfiddle.net/mwatz122/g9ay26x3/

- Matthew

Answer 3

将您的表单放在一个像这样的 <div> 中：

<div align="center">
    <!-- insert code here -->
</div>

然后在CSS中添加

form {
    text-align: left;
}

- Adam Oates

Answer 4

#Registercontainer {
    text-align: center;
}

请尝试这个。它可能有所帮助。

- Vinay Sharma