CODEWITHSUNDEEP
htmlcssforms
user4592091
user4592091

Reputation:

Center Table Data Relative to Inputs

I created a login form in a div (I am preferring to use tables for this - please ignore the php in the values). The issue is that my 'submit' and 'Create a new account' table rows/data only center in relation to table data that is NOT an input field. I would like for the last two rows to center in relation to the entire username and password rows.

How can I get the last two rows to center? I've tried creating a new table with those specific rows and centering them, didn't make a difference. Any input would be appreciated.

Here is a link to the HTML/CSS and output: http://jsbin.com/sepipolohu/4/edit

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<h2>Please login below.</h2>
<h3>Don't have an account? Create one here.</h3>

<div class="formFormat">  

<form name="loginForm" method="post" action="<?php? $_SERVER['PHP_SELF'];>" >
  <table id="cssTable">
    <tr>
        <td>Username:</td><td><input type="text" id="user" name="user" value="<?php echo $user_name?>" /></td>
    </tr>
    <tr>
        <td>Password:</td><td><input type="text" id="pass" name="pass" value="<?php echo $user_password?>"/></td>
    </tr>
   <tr>
     <td><input type="submit" name="submitLogin"/></td>
   </tr>
   <tr>
      <td id="createAccount">Create an account.</td>
   </tr>
  </table>
</form>
</div> 

</body>
</html>

CSS: 

body {
  width: 100%;
  height: 100%;
  text-align:center;
  font-family: helvetica;
  font-color: white;
background-image: url(https://download.unsplash.com/phto-1429091967365-492aaa5accfe);
}

.formFormat{    
  padding: 10px;
  height: 150px;
  width:240px;
  border: 1px black solid;
  display:inline-block;
  position: relative;

}


#createAccount {
  font-style: italic;
}

Upvotes: 0

Views: 34

Answers (2)

fnlls10
fnlls10

Reputation: 78

Remove this

<tr>
  <td><input type="submit" name="submitLogin"/></td>
</tr>
<tr>
  <td id="createAccount">Create an account.</td>
</tr>

and put the code below after </table> and before </form>

<input type="submit" name="submitLogin"/>
<span id="createAccount">Create an account.</span>

put <br/> between <input type="submit" name="submitLogin"/> and <span id="createAccount">Create an account.</span> if you want the text 'Create an account' under the button.

Look here

Upvotes: 1

Charlie
Charlie

Reputation: 90

Change the width to auto in .formFormat

width:auto;

If you want the button and the "Create an account" text to center just wrap them in center tags. <center> </center>

Upvotes: 0

Related Questions