私のHTML入力エリアを中央に置くことができない

Question

これはなぜ機能しないのかわかりませんいくつかの入力ボックスを集中させようとしていて、他のスタックオーバーフロースレッドをチェックして解決策を試したが、仕事に..助けてください！ここで（inputタグのスタイルは）私もそうのようなdivの中にスタイルを試してみた私は今それを持っているか

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

です：

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

と入力のクラス/ IDを使用し、 divをCSSでスタイルに囲みます。何もない。私は間違って何をしていますか？

Answer 1

は自分のCSSにtable { margin : 0 auto }を追加し、それが

を中央に表示されます私は、私が何を意味するかを証明するようにコードを追加しました:)

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>

以下のコードでは、1列の行に2つの列と一致するようにcolspan="2"を追加しました。彼らは、その親要素の中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

これを追加してdiv { display: table; margin: 0 auto; }の中心にしますが、主要なブラウザをサポートしています。

Answer 3

あなたはフレキシボックスの機能を使用することができます。

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>