¿Por qué el margen: no centra automáticamente una imagen?

93

<html>
<head>
<title>Test</title>
</head>
<body>
    <div>
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

El se divexpande al 100% como debería, pero la imagen no se centra. ¿Por qué?

html css

— Joe Phillips
fuente

197

Porque su imagen es un elemento de bloque en línea . Puede cambiarlo a un elemento de nivel de bloque como este:

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

y estará centrado.

— Keltex
fuente

10

Necesita renderizarlo como nivel de bloque;

img {
   display: block;
   width: auto;
   margin: auto;
}

— TheDeadMedic
fuente

¿Por qué solo se alinea horizontalmente y no verticalmente?

— Mr Bell

4

La alineación vertical no es tan sencilla como podría haber esperado. Todo depende de

— TheDeadMedic

8

Añadir style="text-align:center;"

prueba el código siguiente

<html>
<head>
<title>Test</title>
</head>
<body>
    <div style="text-align:center;vertical-align:middle;">
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

— Pranay Rana
fuente

No creo que su respuesta sea incorrecta, pero la suya carece de explicación sobre el tipo de pantalla.

— Joe Phillips

Aunque su respuesta puede considerarse como una solución alternativa, no la recomendaría. La razón es el hecho de que si agrega algo más dentro del div, un encabezado, por ejemplo, se alinearía en el centro con la imagen. Para alinear el título a la izquierda, tendría que escribir más estilos para él. Tendrá que seguir haciendo esto para cualquier cosa que agregue al div. Por lo tanto, display: block;se recomienda encarecidamente agregar a la imagen.

— Devner

2

Sé que esta es una publicación antigua, pero quería compartir cómo resolví el mismo problema.

Mi imagen heredaba un flotador: dejado de una clase principal. Al configurar float: none, pude hacer que margin: 0 auto y display: block funcionen correctamente. Espero que pueda ayudar a alguien en el futuro.

— Ryan Hollingsworth
fuente

1

Descubrí que debo definir un ancho específico para el objeto o nada más lo centrará. Un ancho relativo no funciona.

— Catwoman
fuente

2

Esto no proporciona una respuesta a la pregunta. Para criticar o solicitar una aclaración de un autor, deje un comentario debajo de su publicación; siempre puede comentar sus propias publicaciones y, una vez que tenga suficiente reputación , podrá comentar cualquier publicación .

— Kristijan Iliev

Mi punto fue que, si bien varias personas han dado respuestas que funcionan, solo funcionan si el código incluye una definición específica del ancho del objeto. Por ejemplo: <img [... etc., Etc., ...] style = "display: block; margin: auto; width: 200px" /> funcionará, pero no use un tamaño relativo, como "width : 50% ". Por supuesto, si usa "ancho: 100%", entonces el centrado no es un problema, porque entonces no hay margen a la izquierda o derecha del objeto.

— Catwoman

0

abrir y divluego poner

style="width:100% ; margin:0px auto;"

image etiqueta (o) contenido

cerrar div

— Hamd Islam
fuente

0

<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>

— Salil
fuente

0

He encontrado ... margin: 0 auto; funciona para mi. Pero también he visto que NO funciona debido a que la clase fue superada por otra especificidad que tenía ... float: left; así que tenga cuidado con lo que puede necesitar agregar ... float: none; esto funcionó en mi caso ya que estaba codificando una consulta de medios.

— Dinosaurio
fuente