Cómo centrar una img absoluta dentro de un div

En el diseño Web, cuando se utiliza el posicionamiento absoluto para un objeto, el navegador lo coloca en relación con su primer objeto padre. En muchos casos, esto termina la alineación del objeto en el lado izquierdo del bloque. Eso significa que el objeto se muestra alineado con el lado izquierdo del navegador. Se puede utilizar una propiedad text-align para centrar texto o algunos otros objetos, pero esto no funciona con imágenes que utilizan el posicionamiento absoluto. Sin embargo, puede evitar esta limitación mediante el uso de la anchura de la imagen y diversas propiedades de estilo para modificar la posición de la imagen.

Instrucciones

1 Abra el archivo HTML. Insertar el cursor dentro de la etiqueta <div> en la que desea insertar una imagen absoluta.

2 Escriba lo siguiente:

<Img alt = "Descripción de la imagen" = estilo "100px" = anchura "position: absolute; margin-left: -50px; left: 50%;" />

Cambiar el "src" y "ancho" para que coincida con los atributos de los que pertenecen a la imagen. Cambiar la propiedad de estilo "margin-left" a la igualdad de la mitad de la anchura de la imagen, si es necesario. La "izquierda" propiedad de estilo establece el borde izquierdo de la imagen con posición absoluta a la mitad de la anchura de su elemento padre, que se centra de manera efectiva dentro del bloque.

3 Guarda el archivo.