10/07/2020Artículo original
El clásico elemento para colocar imágenes en HTML, , poco a poco ha sido sustituido por el más moderno y capaz elemento
Bien, el caso es que una duda sencilla pero que a más de uno le puede traer de cabeza (lo sé porque me lo preguntan mucho los alumnos) es ¿cómo hago para centrar los contenidos de un elemento
En realidad es sencillo pero la cosa cambia en función de si se gestiona como un elemento de línea o de bloque.
Tanto como
Ahora bien, si los queremos visualizar como elementos de bloque, algo muy común, la cosa cambia ligeramente.
En el caso de las imágenes llega con otorgarles márgenes automáticos a ambos lados, así (como suele hacerse con cualquier elemento de bloque):
display: block;margin: 0 auto;
pero en el caso de las etiquetas
Si abres el navegador y ves cómo es este elemento mostrándolo en las herramientas del desarrollador verás que, por defecto el elemento está colapsado en altura y que dentro contiene a la imagen en cuestión. De hecho, aunque tengamos elementos srcset para determinar de manera automática la mejor imagen en cada caso en función del ancho y de la densidad de pantalla, en el fondo lo que hay es un elemento contenedor (el que es el que carga la imagen final que se está mostrando.
Por lo tanto para centrarlo cuando fuerces a que sea un elemento de bloque tienes dos opciones:
- Centrar el elemento <img> que hay dentro del <picture> de la manera habitual indicada arriba.
- Otorgarle un ancho apropiado al elemento <picture> para que pueda centrarse como cualquier elemento de bloque, que debe tener un ancho para que puedan establecerse márgenes automáticos con él. Lo mejor en este caso es usar width:fit-content; para que se ajuste al ancho de la imagen que tenga dentro de manera automática.
La mejor manera es verlo en la práctica, en este minivideo:
[youtube:QRg9fzQp7EE]¡Espero que te resulte útil!