Cómo centrar una imagen en HTML y CSS con varios métodos

Centrar una imagen usando HTML y CSS puede ayudarte a crear una sensación de simetría en tu sitio web y atraer la atención de manera efectiva a los elementos más importantes de la página.

El problema es que si no tienes experiencia en codificación, alinear cualquier elemento con código HTML puede parecer una tarea difícil. En este artículo, veremos todo lo que necesitas saber sobre centrar imágenes (o cualquier elemento) con varios métodos para principiantes.

¿Para qué sirve centrar las imágenes?

Primero, ¿por qué deberías centrar las imágenes, o cualquier otro elemento, en primer lugar? Los seres humanos amamos la simetría. Esta preferencia es tan fuerte que en realidad está integrada en nuestro sistema nervioso.

La simetría no significa que las cosas tengan que ser idénticas a ambos lados de un eje. Hay varias formas de crear simetría en un sitio web, y la que discutiremos en este artículo es el equilibrio.

Lograr el equilibrio en un sitio web depende en gran medida de la alineación de los elementos en una página. Centrar elementos, en particular elementos grandes como imágenes, puede ayudar a que el diseño se vea ordenado y agradable a la vista.

El proceso de centrado no es difícil, pero varía dependiendo de si los elementos están en línea o en bloque. Existen algunas diferencias entre estos tipos de elementos, pero la principal diferencia es cómo afectan el flujo de una página.

Diferencia entre centrado en línea y en bloque

Los elementos de bloque funcionan interrumpiendo el flujo de una página, mientras que los elementos en línea continúan el flujo.

Los elementos de bloque comienzan en una nueva línea y ocupan todo el ancho de la ventana gráfica (o el ancho de la página). Los elementos en línea, por otro lado, ocupan el espacio asignado por sus etiquetas HTML, lo que les permite seguir el «flujo» de la página en lugar de interrumpirla. Por supuesto, el ancho y el estilo de estos elementos varían según el código CSS para esa etiqueta HTML.

Aquí hay un ejemplo para ayudar a visualizar estas diferencias. Verás un botón bootstrap diseñado como un elemento en línea y un elemento de bloque.

El botón en línea necesitaría un código especial para alinearse con el centro, mientras que el botón de bloque simplemente necesitaría algunos ajustes en el ancho o el relleno.

Los elementos en bloque y en línea requieren diferentes métodos para alinearlos al centro. Por ejemplo, cuando centras un div (que es un elemento de bloque), puedes usar margen y relleno u otros métodos. Sin embargo, no puedes utilizar estos métodos al centrar imágenes.

Eso es porque las imágenes son elementos en línea y van con el flujo de la página. Al igual que el botón en línea anterior, necesitarás un código especial para agregarlas en el centro de la página.

A continuación, veremos el proceso para centrar una imagen o cualquier elemento en línea en HTML y CSS. Este proceso funcionará ya sea que estés creando su sitio desde cero o utilizando un marco como Bootstrap CSS. Pero primero, cubramos algunos de los conceptos básicos de HTML y CSS.

Comprender HTML y CSS al centrar una imagen

Antes de discutir las diferentes formas de centrar una imagen, es importante aclarar qué significa realmente «en HTML». En otras palabras. veremos dónde se agrega el código de «centrado» para una imagen.

Centrar una imagen con la etiqueta <center> obsoleta

El elemento <center> funcionaba a nivel de bloque que automáticamente centraba cualquier bloque o elemento en línea que contuviera. Entonces, centrar una imagen requeriría una sola línea de HTML que se viera así:

 

<center><img src="image1.jpg" alt="centered image" height="598" width="398"> </center>

Este elemento quedó obsoleto en HTML4. Ahora que HTML5 es el estándar, es probable que esta etiqueta obsoleta no se muestre en ningún navegador moderno. Centrar una imagen ahora requiere que agregues código CSS al HTML. Ya no puedes usar HTML exclusivamente.

Centrar imágenes con CSS

Para centrar una imagen, deberás usar CSS. Tienes varias opciones: CSS interno, CSS externo o CSS en línea.

El CSS interno se pone en la sección <head> de una página web, mientras que el CSS externo se encuentra en una hoja de estilo externa que luego se vincula en la sección <head>. El CSS en línea, por otro lado, está incrustado en el código HTML en la sección <body>. El CSS se define dentro del atributo de «estilo» del elemento al que se dirige.

En general, es recomendable que mantengas el HTML separado del CSS, pero cualquiera de estos métodos generará el mismo resultado. Si no puedes separarlos por alguna razón, como que la plataforma de creación de sitios web que estás utilizando los mantiene juntos en el editor de código fuente, deberás usar CSS en línea.

La buena noticia es que la sintaxis del CSS en línea es similar a la del CSS interno y externo. Se nombra la propiedad y se le asigna un valor de propiedad, pero el conjunto de reglas está entre apóstrofes en lugar de corchetes.

Aquí hay un ejemplo de CSS en línea. Supongamos que deseas cambiar el color del texto del primer encabezado de tu página y dejar los otros encabezados como están. Establece la propiedad de color en el código hexadecimal, añádelo dentro del atributo de estilo y agrega todo dentro de la etiqueta H2.

Compruébalo a continuación:

See the Pen Inline CSS Example by HubSpot (@hubspot) on CodePen.

¿Cómo se compara esto con el CSS interno? Digamos que deseas usar ese mismo CSS pero colocarlo en la sección principal entre las etiquetas <style>.

Reemplazarías el atributo "style=" en el HTML con un selector de CSS. Un selector de CSS es un nombre que se utiliza para identificar un elemento HTML. Luego usa este nombre en el archivo CSS para diseñar la apariencia de ese elemento.

Nota: en el ejemplo a continuación, se usa un selector de ID, pero también podrías usar una clase CSS.

Accede al Pen  Ejemplo de CSS interno de HubSpot (@hubspot) en CodePen.

Así es como se vería el CSS en una hoja de estilo externa. Se vincularía entre las etiquetas <head> de tu página. Ve un ejemplo de una hoja de estilo externa a continuación, con el mismo resultado:

Accede al Pen  CSS con hoja de estilo externa de HubSpot (@hubspot) en CodePen.

Ahora que entendemos las diferentes formas en que puedes escribir CSS, veamos cómo puedes centrar una imagen usando HTML y CSS.

Cómo centrar una imagen en CSS

Hay varias formas de centrar una imagen, dependiendo de si deseas centrarla horizontal o verticalmente. Comenzaremos viendo cómo centrar una imagen horizontalmente.

Cómo centrar horizontalmente una imagen

Hay tres formas de centrar una imagen horizontalmente. El primero funciona mejor para imágenes más pequeñas y el segundo para imágenes más grandes. El tercero funciona mejor si estás utilizando el modelo flexbox.

1. Usar la propiedad text-align

Para centrar una imagen horizontalmente, puedes usar la propiedad de alineación de texto.

1. Dado que esta propiedad solo funciona en elementos a nivel de bloque y no en elementos en línea, comencemos por envolver la imagen en un elemento de bloque.
2. Envuelve la imagen en un div y luego aplica el atributo de estilo con la propiedad de alineación de texto establecida en el centro. Es simple, pero solo funciona si la imagen es más pequeña que tu ventana gráfica.

Aquí está el HTML con CSS en línea y el resultado:

Accede al Pen Propiedad de alineación de texto de HubSpot (@hubspot) en CodePen.

2. Usar la propiedad de margen

Digamos que tienes una imagen muy grande que deseas centrar. En ese caso, envolver la imagen en un elemento de bloque no sería la mejor opción. En su lugar, podrías definirla con la propiedad de visualización CSS y establecerla en «bloque». Aquí se explica cómo centrar una imagen usando la propiedad de margen.

1. Antes de establecer los márgenes, especifica el ancho de la imagen en una cantidad fija para que no abarque toda la ventana gráfica. En este caso, usaremos el 60 %.
2. Establece la propiedad de margen de CSS definiendo la imagen con la propiedad de visualización de CSS y configúrala en «bloque». Esto le indicará al navegador que trate la imagen como si fuera un elemento de bloque, no un elemento en línea, lo que te permitirá usar la propiedad de margen CSS.
3. Establece los márgenes izquierdo y derecho en «automático» para que sean iguales.

Aquí está el CSS con el resultado:

Accede al Pen  Propiedad de margen de HubSpot (@hubspot) en CodePen.

3. Usar la propiedad flex

También puedes centrar una imagen horizontalmente usando la propiedad flex, que no requiere cálculos de margen.

1. Envuelve la imagen en un elemento div.
2. Establece la propiedad de visualización en «flex», lo que le dice al navegador que el div es el contenedor principal y la imagen es un elemento flexible.
3. Determina la propiedad de justificar el contenido en «centro».
4. Especifica el ancho de la imagen en un valor de longitud fijo.

Aquí está el CSS con el resultado:

Accede al Pen  Propiedad flex de HubSpot (@hubspot) en CodePen.

Importante: proporciona un selector de ID al div y usa el selector en el código CSS. De esa manera, no se verán afectados todos los div del sitio.

Cómo centrar verticalmente una imagen

Centrar cualquier elemento verticalmente es más difícil que horizontalmente, pero aún es factible. Usaremos CSS interno.

1. Usar la propiedad de posición

Para centrar una imagen verticalmente, puedes envolverla en un elemento de bloque como un div y usar una combinación de la propiedad de posición de CSS, las propiedades izquierda y superior y la propiedad de transformar.

1. Comienza configurando la posición del div que contiene la imagen en «absoluto» para que se elimine del flujo normal del documento.
2. Determina las propiedades izquierda y superior al 50 %. Esto le dice al navegador que alinee el borde izquierdo y superior del div que contiene la imagen con el centro de la página horizontal y verticalmente (es decir, 50 % a la derecha y hacia abajo de la página). Aquí está el problema: tener los bordes del div alineados en el medio de la página hará que el div se vea descentrado.
3. Para centrar verdaderamente el div que contiene la imagen, puedes usar el método translate() para mover el div a lo largo de los ejes X y Y. Específicamente, posiciona el div 50 % hacia la izquierda y hacia arriba desde su posición actual para que el centro de la imagen se alinee con el centro de la página. Para moverte hacia la izquierda y hacia arriba, deberás usar valores negativos.

Aquí está el CSS:

Accede al Pen  Propiedad de posición de HubSpot (@hubspot) en CodePen.

2. Usar la propiedad flex

1. Para centrar una imagen horizontal y verticalmente con flexbox, comienza envolviéndola en un elemento de bloque como un div.
2. Define este div como un contenedor flexible configurando la propiedad de visualización en «flex».
3. Establece la propiedad de alineación de elementos y justificación de contenido en «centrar». Esto le indicará al navegador que centre el elemento flexible (la imagen dentro del div) vertical y horizontalmente.
4. Determina la altura del contenedor div en una altura proporcional.

Aquí está el CSS con el resultado:

Accede al Pen Propiedad de posición de HubSpot (@hubspot) en CodePen.

Con un poco de conocimiento de codificación, puedes aportar una sensación de simetría y equilibrio a tu sitio con imágenes, textos y botones alineados al centro. Saber cómo alinear estos elementos te ayudará a controlar y personalizar los diseños para lograr una apariencia profesional que los visitantes de tu sitio web disfrutarán.