Center-justifying Elements in a Form - html

Question

I'm trying to get my form, specifically the field and text elements within the form, to be center justified, similar to this:
Form example
How would I go about doing that? I've tried doing
table > tbody {
text-align: justify;
text-align: center;
background-color: #e8e8e8;
}
Which just ends up centering everything(except the fieldset, oddly) and doesnt justify anything. Any help would be appreciated.
My Code

Answer 1

While this is arguably a reasonable case for a table, you could eliminate all the extra markup that tables bring by using the label element set to display:block which kind of acts like a table column. I often lay out my forms in the following way. This has the added advantage that at smallscreen views, you can have the label above the input by taking away the float.
If you want the input elements on the right side (text, email, textarea, etc) to all look the same, you'll have to style them with specific widths, paddings, font-sizes, etc to override the default browser styles. Otherwise they'll all have different default widths.
label, input[type="text"] {
display: block;
float: left;
}
label {
width: 30%;
text-align: right;
margin: 8px;
clear: left;
}
input[type="text"] {
margin: 8px 0;
}
<form>
<label for="name">Name</label>
<input type="text" name="name">
<label for="phone">Phone</label>
<input type="text" name="phone" placeholder="555-5555">
<label for="email">Email</label>
<input type="text" name="email">
...
</form>