Form input elements not centering - css

Question

I've looked at a number of different answers here, and they all seem to boil down to text-align: center in the parent div's style. I've tried that, and it's working for labels, but not actual input elements.
JSFiddle
Here's the basic code:
html
<div id="content">
<div id="login_form">
<h2>Log in to DOT Voting</h2>
<form>
<label for="username">Username</label>
<input type="text" name="username" value="" />
<label for="password">Password</label>
<input type="password" name="password" value="" />
<input type="submit" name="submit" value="Log In" />
</div>
</div>
css
#login_form {
width:90%;
background-color: #bdd2ff;
border: 1px solid white;
margin: 50px auto 0;
padding: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
input[type=text], input[type=password] {
text-align:center;
display: block;
margin: 0 0 1em 0;
width: 90%;
border: 1px solid #818181;
padding: 5px;
}
input[type=submit] , form a {
border: none;
margin-right: 1em;
padding: 6px;
text-decoration: none;
font-size: 12px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #cfdeff;
color: black;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover, form a:hover {
background: #007cc2;
cursor: pointer;
}
The login_form div is centered on the page, the form labels are centered in the div, and the submit button is centered in the div. But the text input boxes are not centered. What can I do to force them to center? (I don't care if the content of the input boxes is centered; I just want the boxes themselves centered in the div.)

Answer 1

Add
margin: auto;
to your input[type=text], input[type=password] class.
Also be sure to remove the text-align: center; attribute because that causes the text in the input to be centered.
JSFiddle

Answer 2

Amend the margin declaration for your input elements to use auto for margin-left and margin-right:
#login_form {
width:90%;
background-color: #bdd2ff;
border: 1px solid white;
margin: 50px auto 0;
padding: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
input[type=text], input[type=password] {
text-align:center;
display: block;
margin: 0 auto 1em auto;
width: 90%; /*280px;*/
border: 1px solid #818181;
/* -moz-border-radius: 1px;
-webkit-border-radius: 1px; */
padding: 5px;
}
input[type=submit] , form a {
border: none;
margin-right: auto;
margin-left: auto;
padding: 6px;
text-decoration: none;
font-size: 12px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #cfdeff;
color: black;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover, form a:hover {
background: #007cc2;
cursor: pointer;
}
Updated JS Fiddle.

Answer 3

text-align does not work on block elements. Remove the display:block on input[type=text], input[type=password] or change it to display:inline-block. Note that inline-block does not work for < IE7.
Or since you have a width declared on the input, you can remove the text-align:center and use margin: 0 auto 1em auto;

Answer 4

It's centering based on the 90% input[type=text], input[type=password] css value. You can define that with a fixed width, or for liquid layouts, set it to 100% width and adjust it's margin.