2012-02-10 12 views
27

Tengo una entrada en un formulario que estoy tratando de alinear en el centro. Por lo general, margin-left:auto y margin-right: auto no responden cuando display: block no se agrega al CSS. He agregado display: block a mi CSS pero todavía no se muestra como me gustaría.margin-left: auto y margin-right: auto no funciona en la entrada

He hecho una jsFiddle para mantener más fácil de entender: http://jsfiddle.net/XnKDQ/97/

+0

Su enlace jsfiddle no parece funcionar. Como sugerencia, ¿el artículo tiene un ancho fijo especificado? Creo que esto también es necesario para este enfoque. – Paddy

+0

Editado el enlace. – Xecure

Respuesta

55

Para que margin: 0 auto; funcione, además de display:block es necesario especificar width.

+4

No se olvide de mostrar: bloquear cualquiera, usted pensaría que sería pantalla: bloque en línea, pero no ... Eso lo rompe –

+0

@Clarence si lees detenidamente la pregunta, puedes ver que Xecure ya aplicó 'display: block;' al elemento. Es por eso que no mencioné eso. – Christoph

+0

Correcto, solo digo que leer su respuesta por sí solo no se menciona, e incluso al comparar la pregunta y su respuesta, no se sigue directamente que el 'display: block' sea relevante. Creo que si añadiste tu respuesta antes, "Además de mostrar: bloquear, para ..." –

0

desea que el tres formas juntos para ser alineados en el centro? Envuélvalos en un solo div y centre ese div en su lugar.

+0

Estoy tratando de alinear el en el centro del formulario – Xecure

4

he encontrado la solución para usted

debe especificar elemento ancho

input { 
    display: block; 
    margin: 10px auto 10px auto; 
    padding: 3px; 
    width:60px; 
} 
2

En mi caso fue flotador dejó que me había olvidado de lo que asegúrese de aplicar float: none a la entrada campo.

Ya tiene pantalla: bloque y margen: 0 automático, solo necesita establecer el ancho también.

Ejemplo que debería funcionar:

input {width:50% !important; margin:0 auto !important; display:block !important; float:none !important} 

Si eso no funciona, trate de añadir importancia a los valores o asegurarse de que su estilo no se sobrescribe con otra cosa!.

+0

Este es el que funcionó para mí. ¡Gracias! – mikeym

0

además de especificar el ancho y el bloque de visualización, también verifica si la propiedad de flotación está configurada en none.

0

En adicción a todo, puede verificar si su cuerpo tiene la posición de parámetro. Se puede configurar como fijo.