Elementos de entrada de formulario que no se centran

Question

He visto varias respuestas diferentes aquí, y todas parecen reducirse a text-align: center en el estilo div principal. Lo he intentado y funciona para etiquetas, pero no para elementos de entrada reales.

JSFiddle

Aquí está el código básico:

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; 
} 

El div login_form es centrado en la página, las etiquetas del formulario se centran en el div y el botón de envío se centra en el div. Pero los cuadros de entrada de texto no están centrados. ¿Qué puedo hacer para obligarlos a centrar? (No me importa si el contenido de los cuadros de entrada está centrado, solo quiero que los cuadros se centren en el div.)

Answer 1

Añadir

margin: auto; 

a su clase input[type=text], input[type=password].

También asegúrese de eliminar el atributo text-align: center; porque eso hace que el texto de la entrada se centre.

JSFiddle

Answer 2

Se centra en la entrada del 90% [tipo = texto], entrada [tipo = contraseña] css value. Puede definirlo con un ancho fijo, o para diseños líquidos, configurarlo en un ancho del 100% y ajustar su margen.

Answer 3

modificar la declaración margin para sus input elementos a utilizar para automargin-left y 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 4

text-align no funciona en elementos de bloque. Elimine display:block en input[type=text], input[type=password] o cámbielo a display:inline-block. Tenga en cuenta que el bloque en línea no funciona para < IE7.

O ya que tiene una anchura declarado en la entrada, puede quitar el text-align:center y utilizar margin: 0 auto 1em auto;