Tabular form controls HTML css - html

Question

I am making a simple (ha!) table. There are problems with what I've included that I would like to fix.
I would like the left hand edges of the input fields to line up. The checkbox and button don't.
I would like to vertically center the text in the labels w.r.t. the associated text input controls.
I would like to avoid the 12em margin on the final submit button.
Thanks. Any ideas appreciated.
p {
text-align: center;
}
p label {
float: left;
clear: left;
width: 20em;
text-align: right;
margin: .25em 1em 0em 0em;
padding: .25em;
}
p label input {
float: right;
clear: right;
padding: .25em;
}
#submit {
clear: both;
float: left;
margin: 1em 0em 0em 12em;
clear: left;
width: 6em;
text-align: center;
background: yellow;
}
p > input {
text-align: center;
}
span {
padding: 0em 1em 0em 0em;
}
<form>
<div>
<p>
<label><span>Name:</span>
<input id="name" type="text" placeholder="Name" autofocus required>
</label>
</p>
<p>
<label><span>Password:</span>
<input id="password" type="password" placeholder="Password" required>
</label>
</p>
<p>
<label><span>Are you a photographer?:</span>
<input id="photog" type="checkbox">
</label>
</p>
<p>
<input type="submit" id="submit" value="Register">
</p>
</div>
</form>

Answer 1

This doesn't do everything you want but it's a start. I've taken <input> elements outside of the <label> elements allowing the <label>s to get a fixed width by adding display: inline-block. I also gave the <label>s a for attribute to keep them linked to their corresponding <input> field. By adding an empty <label> in front of the submit button it gets the proper layout.
In general it's a good idea to use float as little as possible and to style using classes instead of styling the html elements directly. I personally always look at Bootstrap (in this case its forms styling) to see how they do it.
label {
width: 11em;
display: inline-block;
text-align: right;
margin-right: .25em;
padding: .25em;
}
input {
padding: .25em;
}
#submit {
margin: 1em 0em;
text-align: center;
background: yellow;
}
<form>
<div>
<p>
<label for="name">Name:</label>
<input id="name" type="text" placeholder="Name" autofocus required>
</p>
<p>
<label for="password">Password:</label>
<input id="password" type="password" placeholder="Password" required>
</p>
<p>
<label for="photog">Are you a photographer?:</label>
<input id="photog" type="checkbox">
</p>
<p>
<label></label>
<input type="submit" id="submit" value="Register">
</p>
</div>
</form>

Answer 2

My suggestion is to use a table (ha!) in the first place.
Consider using: http://jsfiddle.net/qy911wrb/
<table><tr><td></td></tr></table>
has been added and some CSS was adjusted that you requested.
Please indicate if there should be any other visual adjustments.