2012-02-16 20 views
63
<div style="display: inline-block; margin: 0 auto;"> 
    <input id="abc" type="button" value="button" /> 
</div> 

intento utilizar el código anterior para establecer el ancho de la igualdad de su contenido y, a continuación, centrarlo con margin: 0 auto;div con display: margen inline-block 0 auto no centrar

Pero no funcionó para mí en ningún navegador. ¿Cualquier sugerencia?

Por cierto, cuando establezco la propiedad width, funciona bien.

<div style="width: 10em; margin: 0 auto;"> 
    <input id="abc" type="button" value="button" /> 
</div> 
+2

El ancho es necesario *** *** – xandercoded

+2

No, no lo es. Ver mi respuesta –

+0

Comentario de Per @Xander, sin ancho, un DIV se expandirá al 100% de su contenedor. Entonces, "margin: 0 auto" no va a mostrar ningún efecto, ya que necesitarás algo más pequeño que el 100% de ancho. Si solo estás tratando de centrar el botón, ¿por qué no centrar solo el texto? es decir. "text-align: center" en el estilo DIV. Creo que las etiquetas INPUT están en línea naturalmente, por lo que debe centrarse dentro de DIV> – jmbertucci

Respuesta

128

display: table; sería colocarlo en el centro también:

CSS:

.button{ 
    display: table; 
    margin: 0 auto; 
    } 

HTML:

<div class="button"> 
<input id="abc" type="button" value="button" /> 
< /div> 

Nota: El uso de estilos en línea es una mala práctica.

+5

pantalla: la mesa funciona! – etlds

+4

http://www.quirksmode.org/css/display.html#table Buena explicación aquí – etlds

+2

Pero no funciona en IE <= 7. – kapa

42

desde que pidió DIV para ser inline-block, text-align: center; es la respuesta.

<div style="text-align: center;"> 
<div style="display: inline-block; text-align: left;"> 
    <input id="abc" type="button" value="button" /> 
</div> 
</div> 
+11

'text-align: center;' centrará el contenido en línea * del div, no el div en sí mismo. – yatskevich

+0

Perdón, se olvidó de borrar el CSS. Lo siento. –

+0

No, eso no es lo que quiero. Quiero centrar el div mismo. – etlds

1

Trate

body {text-align: center;} 
Cuestiones relacionadas