Los márgenes automáticos no centran la imagen en la página

97

En este ejemplo, la imagen no está centrada. ¿Por qué? Mi navegador es Google Chrome v10 en Windows 7, no IE.

<img src="/img/logo.png" style="margin:0px auto;"/>
css google-chrome margin centering Diseñador web
fuente
Al probar una clase de estilo, descubrí que este no era un margen de trabajo : 0 automático; después de algunas pruebas, descubrí que si el nombre de la clase que está agregando a un elemento tiene el mismo nombre que un elemento, esto no funcionará.
LostLight

Respuestas:

218

agregue display:block;y funcionará. Las imágenes están en línea de forma predeterminada

Para aclarar, el ancho predeterminado para un blockelemento es auto, que por supuesto llena todo el ancho disponible del elemento contenedor.

Al establecer el margen en auto, el navegador asigna la mitad del espacio restante a margin-lefty la otra mitad a margin-right.

Ross
fuente
12
+1 por tener razón. Sería una gran respuesta si elaborara sobre lo que se requiere para margin:autocentrar un elemento en el flujo. ( display:blocko display:table, position:statico position:relative, etc.)
Phrogz
1
@Phrogz estuvo de acuerdo; agregó alguna explicación.
Ross
15
Aquellos que lean esto también pueden encontrar útil agregar "float" none, ya que tener cualquier otro tipo de flotante romperá su margen automático.
Code Whisperer
Pero todavía no está centrado. Solo está centrado horizontalmente. Quiero centrarlo verticalmente, pero incluso si cambio 0px autoa solo auto, todavía no funciona.
Aaron Franke
14

En algunas circunstancias (como las versiones anteriores de IE, Gecko, WebKit) y la herencia, los elementos con position:relative;impedirán margin:0 auto;trabajar, incluso si top, right, bottom, y leftno son establecidas.

Establecer el elemento en position:static;(el valor predeterminado) puede solucionarlo en estas circunstancias. Generalmente, los elementos a nivel de bloque con un ancho especificado respetarán el margin:0 auto;uso de relativeo el staticposicionamiento.

Brendan
fuente
1
margin: 0 autofunciona bien en elementos relativamente posicionados siempre que sean elementos de bloque sin flotador y un ancho especificado ...
Ennui
Supongo que es sarcasmo. Si edita su respuesta para que no sea inexacta, eliminaré el voto negativo. He estado escribiendo CSS durante casi 15 años y no puedo recordar que los márgenes automáticos no funcionen para centrar horizontalmente elementos de ancho fijo relativamente posicionados, aunque otras propiedades como floaty displaypueden cambiar ese comportamiento.
Ennui
14

Puede centrar div de ancho automático usando display:table;

div{
margin: 0px auto;
float: none;
display: table;
}
sameeuor
fuente
1
Esto funciona y no sé por qué. ¿Podrías explicar?
Eso es JustCheesy
1
Nunca he usado esto antes, pero ahora me funciona.
zkytony
10

En mi caso, el problema era que había establecido el ancho mínimo y máximo sin el ancho en sí.

Daniel Sitarz
fuente
3
para recapitular: el elemento debe ser position:static, tener un width:conjunto fijo y ser un display:blockelemento
Joey T
También fue un problema de ancho para mí: bootstrap configuró automáticamente mi div para usar el 100% disponible
Edmund Sulzanok
6

Siempre que no agreguemos ancho y agreguemos margin:auto, supongo que no funcionará. Es de mi experiencia. El ancho da la idea de dónde exactamente necesita proporcionar márgenes iguales.

pantalón tejaswini
fuente
2

hay una alternativa para margin-left:auto; margin-right: auto;o margin:0 auto;para los que usan position:absolute;así es cómo:
establece la posición izquierda del elemento al 50% (left:50%; ) pero eso no lo centrará correctamente para que el elemento se centre correctamente, debe darle un margen de menos la mitad de su ancho, que centrará su elemento perfectamente

aquí hay un ejemplo: http://jsfiddle.net/35ERq/3/

Andrei
fuente
0

Para un botón de arranque:

display: table; 
margin: 0 auto;
Abram
fuente
0

poner esto en el css del cuerpo: background: # 3D668F; luego agregue: display: block; margen: automático; al css de img.

Gail
fuente