Kann meine HTML-Eingabebereiche nicht zentrieren

Question

Also, nicht sicher, warum das nicht funktioniert Ich versuche, einige Eingabefelder zu zentrieren, und ich überprüfte einige andere Stapelüberlauf-Threads, versuchte die Lösungen und kann es immer noch nicht bekommen zu arbeiten .. bitte helfen! Hier ist, wie ich es jetzt (Stil auf dem Eingang-Tags)

<!-- Register Form --> 
<div class="user_register" > 
    <form> 
     <table> 
     <tbody> 
      <br></br> 
      <tr> 
       <td><input type="text" name ='first_name' size='8 placeholder='First Name'/></td> 
       <td><input id ='last_name'type="text" name = 'last_name' size='8' placeholder ='Last Name'/></td> 
      </tr> 
      <br></br> 
      <tr> 
       <td><input style="margin:0px auto; display:block;" class='register_inputs' type="text" name='username' placeholder='Username' size='14'/></td> 
      </tr> 
      <tr> 
       <td><input style="margin:0px auto; display:block;" class='register_inputs' type="text" name='email' placeholder='Email'size='14' /></td> 
      </tr> 
      <tr> 
       <td><input style="margin:0px auto; display:block;" style="margin:0px auto; display:block;" class='register_inputs' type="password" name='password' placeholder='Password' size='14' /></td> 
      </tr> 
      <tr> 
       <td><input style="margin:0px auto; display:block;" class='register_inputs' type="password" name='confirm_password' placeholder='Confirm Password' size='14' /></td> 
      </tr> 
      <tr> 
       <td><a href="#"  class="submit_reg">Register</a></td> 
       <td><a href="#" class="back_to_login">Back</a></td> 
      </tr> 
     </table> 
    </form> 
</div> 

ich auch Stil in der div wie so versucht habe:

<div style="text-align:center;"> 
    <input type="text" /> 
</div> 

und unter Verwendung einer Klasse/id an den Eingängen und umgebende div um mit CSS zu stylen. Nichts. Was mache ich falsch?

Answer 1

nur table { margin : 0 auto } auf Ihrem CSS hinzufügen und es wird

zentriert Ich habe den Code zu zeigen, was ich meine :)

table { margin : 0 auto; }

<div class="user_register" > 
 
          <form> 
 
          <table> 
 
          <tbody> 
 
        <br></br> 
 

 

 
          <tr> 
 
           <td><input type="text" name ='first_name' size='8 placeholder='First Name'/></td> 
 
           <td><input id ='last_name'type="text" name = 'last_name' size='8' placeholder ='Last Name'/></td> 
 
          </tr> 
 
          <br></br> 
 

 

 
          <tr> 
 
           <td><input style="margin:0px auto; display:block;" class='register_inputs' type="text" name='username' placeholder='Username' size='14'/></td> 
 

 
          </tr> 
 

 
          <tr> 
 
           <td><input style="margin:0px auto; display:block;" class='register_inputs' type="text" name='email' placeholder='Email'size='14' /></td> 
 

 
          </tr> 
 

 
          <tr> 
 
           <td><input style="margin:0px auto; display:block;" style="margin:0px auto; display:block;" class='register_inputs' type="password" name='password' placeholder='Password' size='14' /></td> 
 
          </tr> 
 

 
          <tr>  
 
           <td><input style="margin:0px auto; display:block;" class='register_inputs' type="password" name='confirm_password' placeholder='Confirm Password' size='14' /></td> 
 

 
          </tr> 
 

 
          <tr> 
 
           <td><a href="#"  class="submit_reg">Register</a></td> 
 
           <td><a href="#" class="back_to_login">Back</a></td> 
 
          </tr> 
 
         </table> 
 
         </form> 
 
        </div>

Auf dem folgenden Code ich colspan="2" auf Zeilen hinzugefügt, die einzelnen Spalt haben, so dass es Ihre Zeilen mit 2 Spalten entspricht. Ich habe auch width: 100% auf Ihre Eingabe Textbox und Passwort, so dass sie die Breite der Mutterspiele td

table { margin : 0 auto; } 
 
td { padding : 0px 2px; } 
 

 
input[type="text"], 
 
input[type="password"] { 
 
width : 100%; 
 
} 
 

 
a.back_to_login { 
 
    text-align : right; 
 
    display : block; 
 
}

<div class="user_register" > 
 
    <form> 
 
     <table> 
 
      <tbody> 
 
       <tr> 
 
        <td><input type="text" name ='first_name' size='8 placeholder='First Name'/></td> 
 
        <td><input id ='last_name'type="text" name = 'last_name' size='8' placeholder ='Last Name'/></td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="2"><input style="margin:0px auto; display:block;" class='register_inputs' type="text" name='username' placeholder='Username' size='14'/></td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="2"><input style="margin:0px auto; display:block;" class='register_inputs' type="text" name='email' placeholder='Email'size='14' /></td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="2"><input style="margin:0px auto; display:block;" style="margin:0px auto; display:block;" class='register_inputs' type="password" name='password' placeholder='Password' size='14' /></td> 
 
       </tr> 
 
       <tr>  
 
        <td colspan="2"><input style="margin:0px auto; display:block;" class='register_inputs' type="password" name='confirm_password' placeholder='Confirm Password' size='14' /></td> 
 
       </tr> 
 
       <tr> 
 
        <td><a href="#" class="submit_reg">Register</a></td> 
 
        <td><a href="#" class="back_to_login">Back</a></td> 
 
       </tr> 
 
     </table> 
 
    </form> 
 
</div>

Answer 2

Fügen Sie dies hinzu, um es zu zentrieren div { display: table; margin: 0 auto; }, aber es unterstützt die wichtigsten Browser.

Answer 3

können Sie Flexbox Eigenschaften:

div { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
} 
 

 
div > * { 
 
    width: 100px; 
 
    margin: 6px auto; 
 
}

<div> 
 
    <input type="text" /> 
 
    <input type="radio" /> 
 
    <input type="checkbox" /> 
 
    <select> 
 
    <option value="">Option</option> 
 
    </select> 
 
<div>