Nick Cabrera Nick Cabrera - 5 months ago 6
HTML Question

Can't center my html input areas

So, not sure why this isn't working I am trying to center some input boxes and I checked some other stack overflow threads, tried the solutions and still can't seem to get it to work.. please help! Here's how I have it right now (style on the input 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>


I've also tried style in the div like so:

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


and using a class/id on the inputs and surrounding div to style with css. Nothing. What am I doing wrong?

Answer

just add table { margin : 0 auto } on your css and it will be centered

I added your code to demonstrate what I mean :)

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>

On the code below I added colspan="2" on rows that have single column so it matches your rows with 2 columns. I also set width: 100% to your input textbox and password so that they matches the width of its parent 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>

Comments