Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Center a button nside a table cell

    Hi

    I've been fighting with this code:

    Code:
      <div id = "reg_form">
      	<form method="post" action="register.php" id="reg-form">
          <table>
            <tr>
              <td><label><?php echo $REG_FIRST_NAME; ?></label></td>
              <td><input type="text" id = "fname" name="fname" value="" /></td>
              <td></td>
            </tr>
            <tr>
              <td><label><?php echo $REG_LAST_NAME; ?></label></td>                
              <td><input type="text" id = "lname" name="lname" value="" /></td>
              <td></td>
            </tr>
            <tr>
              <td><label><?php echo $REG_USER_NAME; ?></label></td>
              <td><input type="text" id = "uname" name="uname" value="" /></td>
              <td></td>
            </tr>
            <tr>
              <td><label><?php echo $REG_PWD1; ?></label></td>
              <td><input type="text" id = "pwd1" name="pwd1" value="" /></td>
              <td></td>
            </tr>
            <tr>
              <td><label><?php echo $REG_PWD2; ?></label></td>
              <td><input type="text" id = "pwd2" name="pwd2" value="" /></td>
              <td></td>
            </tr>
            <tr>
              <td><label><?php echo $REG_EMAIL; ?></label></td>
              <td><input type="text" id = "email" name="email" value="" /></td>
              <td></td>
            </tr>
            <tr>
              <td align = "center" colspan = "2"><input type = "submit" class = "submit" name="send" value="<?php echo $REG_SUBMIT; ?>" /></td>
              <td></td>
            </tr>
          </table>
       </form>
      </div>
    I would like to center the submit button inside the table cell. It keeps aligning to right. My CSS are as follow:

    Code:
    /* CSS Document */
    body { background-color:#FFFFFF; }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    
    /* Register Form */
    #reg_form { 
    }
    
    #reg_form label {
      font-family: Arial, Helvetica, sans-serif;
      font-style: normal;
      font-size: 15px;
      font-weight: normal;
      margin: 5px;
      color: #565656;
    }
    
    #reg_form label.error {
      font-family: Arial, Helvetica, sans-serif;
      font-style: normal;
      font-size: 10px;
      font-weight: normal;
      margin: 5px;
      color: #ff0000;
    }
    
    #reg_form input {
      border: 1px solid #cecece;
      width: 150px;
      height: 20px;
      margin: 5px;
      float: right;
    }
    
    #reg_form input.error {
      border: 1px solid #ff0000;
      width: 150px;
      height: 20px;
      margin: 5px;
    }
    
    #reg_form .submit {
      border: 1px solid #404040;
      width: 100px;
      height: 20px;
      margin: 5px;
    }
    Can some one help me with this?

    Regards

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    145
    Thanks
    0
    Thanked 27 Times in 27 Posts
    See if this works the way you desire...added a div to the td where your submit button is located:

    Code:
    <!DOCTYPE html>
    <html>
    
    <style>
    
    /* CSS Document */
    body { background-color:#FFFFFF; }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    
    /* Register Form */
    #reg_form { 
    }
    
    #reg_form label {
      font-family: Arial, Helvetica, sans-serif;
      font-style: normal;
      font-size: 15px;
      font-weight: normal;
      margin: 5px;
      color: #565656;
    }
    
    #reg_form label.error {
      font-family: Arial, Helvetica, sans-serif;
      font-style: normal;
      font-size: 10px;
      font-weight: normal;
      margin: 5px;
      color: #ff0000;
    }
    
    #reg_form input {
      border: 1px solid #cecece;
      width: 150px;
      height: 20px;
      margin: 5px;
    float:right;
    }
    
    #reg_form input.error {
      border: 1px solid #ff0000;
      width: 150px;
      height: 20px;
      margin: 5px;
    }
    
    #reg_form .submit{
    
      border: 1px solid #404040;
      width:100px;
      height: 20px;
      margin:5px auto;
    
    
    }
    
    #test{
    margin:0 auto;
    width:100px;
    }
    
    
    </style>
    <body>
    
    <div id = "reg_form">
      	<form method="post" action="register.php" id="reg-form">
          <table border="1">
            <tr>
              <td><label><?php echo $REG_FIRST_NAME; ?></label></td>
              <td><input type="text" id = "fname" name="fname" value="" /></td>
              <td></td>
            </tr>
            <tr>
              <td><label><?php echo $REG_LAST_NAME; ?></label></td>                
              <td><input type="text" id = "lname" name="lname" value="" /></td>
              <td></td>
            </tr>
            <tr>
              <td><label><?php echo $REG_USER_NAME; ?></label></td>
              <td><input type="text" id = "uname" name="uname" value="" /></td>
              <td></td>
            </tr>
            <tr>
              <td><label><?php echo $REG_PWD1; ?></label></td>
              <td><input type="text" id = "pwd1" name="pwd1" value="" /></td>
              <td></td>
            </tr>
            <tr>
              <td><label><?php echo $REG_PWD2; ?></label></td>
              <td><input type="text" id = "pwd2" name="pwd2" value="" /></td>
              <td></td>
            </tr>
            <tr>
              <td><label><?php echo $REG_EMAIL; ?></label></td>
              <td><input type="text" id = "email" name="email" value="" /></td>
              <td></td>
            </tr>
            <tr>
              <td  colspan = "2" ><div id="test"><input type = "submit" class = "submit" name="send" value="<?php echo $REG_SUBMIT; ?>" />
    </div></td>
              <td></td>
            </tr>
          </table>
       </form>
      </div>
    
    </body>
    </html>
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for? Jesus is returning very soon

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there virginio,

    and a warm welcome to these forums.

    Try it like this...

    HTML
    Code:
    
    <td colspan="2"><input type="submit" class="submit" name="send" value="<?php echo $REG_SUBMIT; ?>" /></td>
    CSS
    Code:
    
    #reg_form .submit {
      float:none;
      display:block;
      border:1px solid #404040;
      width:100px;
      height:20px;
      margin:5px auto;
    }

    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •