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

ahmed 发表于 Dev

艾哈迈德

HTML: 

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

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


    }

嗨，大家好，我正在创建一个注册表格，想知道如何将整个表格移到页面中央吗？现在，它全部位于容器的左侧，我希望它看起来像这样-https://id2.s.nfl.com/fans/register?returnTo =http% 3A%2F%2Fweeklypickem.fantasy 。 nfl.com％2F

年龄

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

#Registercontainer必须位于页面的中央。意思是，您的of固定1200px不会很好地工作。我采取了减少from容器大小的方法，以提供更好的外观和效果，如下所示：

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