Cómo centrar un elemento de HTML5

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 que permite definir diferentes imágenes y formatos en función del ancho de pantalla y el soporte, y combinarlo con subelementos y para un control total. Esto no sólo sirve para lo obvio, que es mostrar imágenes a diferentes tamaños y resoluciones, sino que se pueden conseguir cosas más avanzadas, como por ejemplo, hacer que según el tamaño de la pantalla se centre la imagen en determinado detalle, en lugar de que se vean otras partes menos interesantes.

  Cómo crear tu propia skill para Alexa paso a paso

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 mi página o aplicación web?

  Los mejores recursos y cursos gratis online para formarte sobre inteligencia artificial

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 son elementos inline por defecto, así que se pueden centrar bien simplemente usando text-align:center; en su contenedor (ojo, no en ellos, claro).

  Nueva y útil funcionalidad en Chrome 60: identificadores de terceras empresas

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

no, ya que son elementos contenedores, que son los que realmente contienen a la imagen que finalmente se muestra en función de cómo se haya configurado.

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 ) con un elemento dentro que es un 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:

  1. Centrar el elemento <img> que hay dentro del <picture> de la manera habitual indicada arriba.
  2. 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!

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad