Question

所以，不知道为什么这不起作用我试图集中一些输入框，我检查了一些其他堆栈溢出线程，尝试了解决方案，但仍然无法让它工作..请帮忙！这是我现在的方式（输入标签上的样式）

<!-- 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中尝试过样式：

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

并在输入和周围div上使用class / id来设置css样式。没有。我究竟做错了什么？

Answer 1

添加此项以使其居中div { display: table; margin: 0 auto; }，但它支持主流浏览器。

Answer 2

您可以使用flexbox功能：

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>

Answer 3

只需在您的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>

在下面的代码中，我在具有单列的行上添加了colspan="2"，因此它与具有2列的行匹配。我还将width: 100%设置为您的输入文本框和密码，以便它们与其父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>

无法集中我的html输入区域

3 个答案: