css - texto - Los márgenes automáticos no centran la imagen en la página
poner texto al lado de una imagen css (7)
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;"/>
Cuando no agreguemos ancho y agreguemos margin:auto , supongo que no funcionará. Es de mi experiencia. El ancho le da a la idea dónde exactamente necesita proporcionar márgenes iguales.
En algunas circunstancias (como versiones anteriores de IE, Gecko, Webkit) y herencia, elementos con position:relative; evitará el margin:0 auto; de trabajo, incluso si top , right , bottom e left no están configurados.
Establecer el elemento en position:static; (el predeterminado) puede arreglarlo bajo estas circunstancias. En general, los elementos de nivel de bloque con un ancho especificado respetarán el margin:0 auto; usando posicionamiento relative o static .
En mi caso, el problema era que había establecido el ancho mínimo y máximo sin ancho propio.
Para un botón de arranque:
display: table;
margin: 0 auto;
Puede centrar div ancho automático usando display:table;
div{
margin: 0px auto;
float: none;
display: table;
}
agregar display:block; y funcionará Las imágenes están en línea por defecto
Para aclarar, el ancho predeterminado para un elemento de block 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 al margin-left y la otra mitad al margin-right .
hay una alternativa a margin-left:auto; margin-right: auto; margin-left:auto; margin-right: auto; o margin:0 auto; para los que usan position:absolute; así es como:
estableces la posición izquierda del elemento al 50% ( left:50%; ) pero eso no lo centrará correctamente para que el elemento se centre correctamente, necesitas darle un margen de menos la mitad del ancho, que centrará tu elemento perfectamente
aquí hay un ejemplo: http://jsfiddle.net/35ERq/3/