Question

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

Answer 1

将表单放入此<div align="center"></div>然后在CSS类型form {text-align: left;}

中

Answer 2

将margin:auto和固定宽度添加到父DIV。例如：

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

小提琴： https://jsfiddle.net/mwatz122/g9ay26x3/

Answer 3

#Registercontainer
{
   text-align: center;
}

请尝试这可能会有所帮助。

Answer 4

这是我提出的解决方案......但是它做了什么？

#Registercontainer需要位于页面的中心。意思是，你用1200px修复后的效果不会太好。我采取了减小容器尺寸的方法，以提供更好的外观和感觉：

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

另请注意，您的<label>需要{strong> this article 中指定的for属性。

如果您有任何问题，请告诉我。仅供参考，有很多方法可以帮助您。

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: