Centrar imagen en div horizontalmente [duplicado]
Tengo imgun div ( class="top_image") y quiero que esta imagen esté exactamente en el medio del div, pero nada de lo que intento funciona...
¡Gracias por cualquier ayuda!
Cada solución publicada aquí supone que conoce las dimensiones de su dispositivo img, lo cual no es un escenario común. Además, es doloroso introducir las dimensiones en la solución.
Simplemente configure:
/* for the img inside your div */
display: block;
margin-left: auto;
margin-right: auto;
o
/* for the img inside your div */
display: block;
margin: 0 auto;
Eso es todo.
Tenga en cuenta que también deberá establecer una inicial min-widthpara su exterior div.
text-align: center solo funcionará para el centrado horizontal. Para que quede en el centro completo, vertical y horizontal puedes hacer lo siguiente:
div
{
position: relative;
}
div img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: [-50% of your image's width];
margin-top: [-50% of your image's height];
}
El W3C proporciona una solución muy simple y elegante para esto. Simplemente use la declaración automática margin:0 de la siguiente manera:
.top_image img { margin:0 auto; }
Más información y ejemplos del W3C.
