Paso a paso de cómo centrar una imagen en CSS ¡Tutorial rápido y fácil!

Paso a paso de cómo centrar una imagen en CSS ¡Tutorial rápido y fácil!

Última actualización 30 de Abril del 2021Tiempo de lectura: 10 min.

Andrea Aranda

Uno de los mayores retos al entender el trabajo web es el uso y configuración de los navegadores, ya que tienen pequeñas diferencias y estándares difíciles de cumplir. Todos estamos de acuerdo en que son muy complicados y no deberían ser así, sobretodo para aquellos que utilizan navegadores antiguos. Funcionalidades simples como insertar texto o centrar una imagen en CSS, deberían ser fáciles de manipular para cualquier programador.

Si sigues utilizando Internet Explorer 6, Firefox o alguna versión de Netscape, lo recomendable es actualizar tu sistema a otro navegador, ya que hacer la configuración básica de centrar una imagen en CSS puede ser más complicado de lo usual y hasta podría adquirir un virus perjudicial para tu PC.

El problema principal que tiene esta programación es la etiqueta img, ya que al no ser inline, tiene dificultades para alinearse en el centro de la página. A diferencia del texto, este solo necesita de “text-align: center” para estar acorde con el párrafo.

En esta nota, hablaremos sobre cómo centrar una imagen en CSS, ya que es menos complicado de lo que crees y te será de gran utilidad al momento de crear tus propias páginas web. Te presentaremos más de una opción para arreglar este problema, en caso una no te funcione.

¿Listo? 🤩

centrar-imagen-en-css

Fuente: Unsplash

Imágenes en CSS

Las imágenes son uno de los elementos más importantes en todo sistema digital, ya que tienden a presentar un aspecto visual mucho más atractivo e interactivo con los usuarios. Las páginas web necesitan de imágenes en su programación CSS para balancear el texto con la gráfica.

El código de imagen CSS más utilizado para colocar este elemento es “background-image”, el cual tiene una sintaxis más extensa si quieres insertar otros factores: “background-image: url | none | inherit”. En esta línea, “url” se refiere a la localización de fondo que tiene la imagen, “none” se utiliza para especificar el elemento que no tiene una imagen de fondo.

Al igual que este código, hay  otras funcionalidades que no son difíciles de configurar, pero muchas personas creen que son complicadas, como por ejemplo centrar una imagen en CSS. Sin embargo, antes de profundizar en este paso a paso, hay un aspecto importante que se debe tomar en cuenta: el tamaño de la imagen. 

imagenes-css

Fuente: Unsplash

Tamaños de imagen CSS

Si queremos controlar el tamaño de la imagen desde el código CSS, puede configurarlo mediante dos propiedades: width (ancho) y height (alto). La función que tienen estos elementos es poder mostrar una imagen a la anchura y altura que quieras, independientemente de las medidas que tengan originalmente.

Sin embargo, debes tomar en cuenta que algunas imágenes tienen una resolución baja, por lo que la modificación de su tamaño real puede distorsionar el resultado estético. Para esto, se necesita tener un selector distinto para cada código de imagen CSS, sin dejar de considerar la sobrecarga del código.

Esta referencia te ayudará a poder centrar una imagen en CSS y tener una visualización previa del resultado sobre las medidas del gráfico dentro del navegador. Lo ideal es utilizar esta programación cuando se tienen imágenes del mismo tamaño.

tamaños-imagenes-css

Fuente: Unsplash

Tamaños width y height CSS

Para que comprendas un poco más sobre las propiedades de las medidas width y height, te presentamos una guía rápida en las que podrás configurar más rápido las longitudes y entenderás la forma correcta de centrar una imagen en CSS.

Width (ancho)

Los valores que se deben colocar son: <medida> | <porcentaje> | auto | inherit.

Se utiliza para establecer la anchura de un elemento, con un valor inicial “auto” y puedes aplicarlo a cualquier factor en línea, como por ejemplo: filas de tabla y grupos de filas de tabla.

Height (alto)

Los valores que se deben colocar son: <medida> | <porcentaje> | auto | inherit.

Se utiliza para establecer la altura de un elemento, con un valor inicial “auto” y puedes aplicarlo a cualquier factor en línea, como por ejemplo: filas de tabla y grupos de filas de tabla.

tamaños-largo-ancho-css

Fuente: Unsplash

Como mencionamos, las medidas que utilices como valores CSS se pueden indicar y configurar para cualquier unidad que esté dentro de la página. El porcentaje que se refiere en los valores de las medidas son respecto al elemento que contiene la plataforma. También se puede elegir colores y medidas CSS para la propia página.

En base a las imágenes, un beneficio rápido y eficiente de esta programación es que si solo se coloca solo un valor, ya sea para el ancho o alto de la imagen, la otra medida se configura automáticamente para conservar la proporción original de la misma y no perder la calidad visual.

Estas variables no solo se aplican a las imágenes CSS, sino también para definir el ancho o alto de otros elementos del documento, como columnas, párrafos, tablas, etc. Estos son pasos previos a centrar una imagen en CSS, ya que para hacerlo necesitas más que solo saber el tamaño de la gráfica que vas a utilizar.

 

¿Cómo centrar una imagen en CSS?

El pequeño tutorial, práctico y fácil, que necesitas conocer para centrar una imagen en CSS está aquí. Existen diferentes mecanismos de configuración que te van a permitir lograr esta acción, cada uno funciona dependiendo de la plataforma y el sistema operativo que tengas. El procedimiento general se efectúa de la siguiente manera.

✅ Paso 1: Aplicación de estilo

Este paso se aplica cuando tienes ciertos problemas para conseguir que tu elemento se centra de forma automática. Esto reducirá el esfuerzo de configuración y te hará la tarea más sencilla, lo único que debes colocar es el siguiente código: .centrado{

✅ Paso 2: Definición de medidas

En este paso tendrás que definir las medidas de tu imagen en CSS. Puedes elegir que sea automático, es decir que el programa va a adecuar el tamaño de la imagen a el espacio dentro de la plataforma. Deberás colocar el siguiente código: margin-left: auto; margin-right: auto;}

✅ Paso 3: Resultado final

Como paso final, deberás verificar que la estructura del código sea la siguiente. Esta forma es la técnica general para centrar una imagen en CSS, la cual debería funcionar dentro de todos los sistemas.

.centrado{

margin-left: auto; 

margin-right: auto;

}

Sin embargo, en algunos sistemas, esta secuencia de códigos no tiene los resultados que esperamos. Como mencionamos antes, hay más de una forma para centrar una imagen en CSS y sabemos que las personas manejan diferentes plataformas informáticas. 

Por eso, tenemos tres opciones más para que logres manejar tu página de la forma que más te agrade y puedas centrar una imagen en CSS.

 

Opción 1 para centrar una imagen en CSS

Si la técnica anterior para centrar una imagen en CSS no te funciona, entonces debes seguir los siguientes pasos.

✅ Paso 1: Identifica el navegador

El primer paso es identificar el navegador que utilizas, ya que esta opción funciona solo en algunos sistemas. Si es Internet Explorer, lamento informarte que no funcionará, pero para plataformas como Chrome, Firefox y Safari, sí tiene resultados exitosos.  

✅ Paso 2: Asignar una etiqueta

Como segundo paso, deberás asignar una etiqueta “img” a la propiedad del elemento de bloque. También el valor “auto” para el “margin”. Esto ayudará a que el navegador asigne una proporción de márgenes más adecuados al espacio en donde se va a centrar una imagen en CSS.

img { display: block; margin: auto; }

opcion-centrar-imagen-css

Fuente: Unsplash

Opción 2 para centrar una imagen en CSS

Si ninguna de las dos opciones anteriores te funcionó, esta segunda opción puede resultar más útil, ya que puede que tu plataforma funcione solo para renderizar las imágenes en modo inline y no con margen automático.

⚠️ Dato: Los elementos inline son los enlaces, controles, input, span, etc.

✅ Paso 1: Elemento text-align

Una de las formas, no tan elegantes pero eficientes, de centrar una imagen en CSS es con el siguiente código. 

text:align-center;

Esto permite alinear el texto y todos los elementos de él, tales como imágenes, se centren. Un ejemplo de esto se muestra a continuación. 

<div style="text-align:center"><img 

src="http://direccion/de/la/imagen.jpg"/></div>

✅ Paso 2: Elemento display

Para hacer que la imagen se comporte como un elemento de bloque y poder configurarlo manualmente en el centro del texto o de la plataforma, el código que necesitas colocar es el siguiente.

.centrado{

display:block;

margin-left: auto;

margin-right: auto;

}

opcion-centrar-imagen-css

Fuente: Unsplash

Opción 3 para centrar una imagen en CSS

Otra opción para centrar una imagen en CSS es colocarla de forma vertical. Para esto, el proceso es el siguiente.

✅ Paso 1: Elemento de celda

El primer paso es hacer que el elemento gráfico que quieres centrar esté dentro de una celda en una tabla. Esto con el fin de utilizar el estilo vertical-align que tienen las tablas.

✅ Paso 2: Definición de altura

Para darle una determinada altura, deberemos colocar el siguiente código, el cual te permite centrar el elemento que contiene la celda. 

.centradoV

{

display: table-cell;

vertical-align: middle

}

Una recomendación para esta opción, es que lo utilices solo cuando quieras mantener tu plataforma en posición vertical, ya que si quieres mezclar con un centrado horizontal en CSS, se puede mover todo el formato y necesitarás agregar otros elementos.

opcion-centrar-imagen-css

Fuente: Unsplash

¿Cómo centrar una imagen CSS en una página web?

Hay otras opciones para centrar una imagen en estas plataformas, por ejemplo en HTML. Sin embargo, este proceso es un poco más complicado, ya que requiere de hacks off-by-one.

También existe un nuevo estilo de CSS que se introdujo hace unos años, llamado flex layout y conocido en el mercado como CSS Flex o CSS Flexbox. Esta nueva versión tiene un soporte de navegador más maduro y capaz de centrar un elemento de forma práctica.

La técnica que mostraremos a continuación se puede utilizar tanto para imágenes como para cualquier otro tipo de elemento. Está disponible tanto para HTML como para CSS, en la técnica ASP.NET. Incluso se puede utilizar en aplicaciones móviles como Mobile RPG.

centar-imagen-css-web

Fuente: Unsplash

Paso 1: Introducción base

Como primer paso, el uso de la técnica ASP.NET te permite introducir inicialmente el código HTML para luego colocarle el CSS.

Lo que debes colocar es el código control “asp:Image”.

Paso 2: Código

En el segundo paso, la etiqueta HTML “img” sirve para mostrar la imagen y se coloca de la siguiente forma.  

<div id="logo-container">

asp:Image ID="image1" runat="server" ImageUrl="~/sunfarm.logo.png" />

</div>

Paso 3: Código CSS

Al trabajar el código CSS con el “img” de HTML se genera un control más eficiente en la ejecución del código “asp:Image”.

El fichero que se debe colocar en CSS se encuentra de la siguiente manera.

Themes/Current/Styles/Theme.css

Paso 4: Código insert

El código que se inserta a continuación se incorporó dentro del master page. Se consideran aparte de las carpetas AVR, .NET y ASP.NET, ya que son poco recomendadas y tienen menos contenido.

Theme.css

Themes/Current/MasterPage.master

<link rel="stylesheet" type="text/css"

href="~/Themes/Current/Styles/Theme.css" />

centrar-imagen-web-css

Fuente: Unsplash

Esperamos hayas comprendido todo este proceso rápido de cómo centrar una imagen en CSS y te sea de gran utilidad en tus futuros proyectos.

Antes de terminar, si tu idea es introducirte en el mundillo de la programación, te recomendamos iniciarte con este curso online para descubrir sobre el desarrollo web front end, con las herramientas de HTML y CSS.

¡Suerte! 🤩

También podría interesarte