Home Blog/ Transformaci贸n digital/
Transformaci贸n digital

驴C贸mo centrar una imagen en CSS?: 隆Olv铆date de los problemas de configuraci贸n de los navegadores!

Juliana Fantino - 16 Oct 21

Articulo

10 min.

Aprender c贸mo centrar una imagen en CSS es indispensable para todo programador de software. Es que 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.聽Y aquellas funcionalidades simples como insertar texto o centrar una imagen en CSS, deber铆an ser f谩ciles de manipular para cualquier programador.

El problema principal que tiene esta programaci贸n es la etiqueta img, ya que al no ser inline, tiene dificultades para alinear una imagen en CSS聽en el centro de la p谩gina. A diferencia del texto, este solo necesita de 鈥渢ext-align: center鈥 para estar acorde con el p谩rrafo.

Hoy, 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. Y as铆, al saber c贸mo poner una imagen al centro en CSS, podr谩s adquirir m谩s competencias como programador web y llevar a cabo todos los proyectos que te encarguen tus clientes o que tengas en mente.

驴Cu谩les son las caracter铆sticas de las im谩genes en CSS?

En este an谩lisis sobre c贸mo alinear una imagen al centro, es esencial destacar antes la importancia funcional del contenido visual en un sitio en l铆nea. De hecho, las im谩genes son uno de los elementos trascendentales 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. Y para que cumplan su funci贸n a la perfecci贸n, si quieres aprender a programar, debes conocer c贸mo centrar im谩genes en CSS.聽

De acuerdo con Sergio Agamez Negrete, desarrollador web y docente a cargo del curso online de Introducci贸n al Desarrollo Web front end: HTML y CSS desde cero: 鈥淐onocer los fundamentos de HTML y de CSS te permitir谩 estructurar y definir el estilo de cualquier p谩gina web. Es el paso inicial de todo desarrollador Front End (...)鈥.聽

Por su parte, continuando con nuestro estudio sobre c贸mo centrar una imagen en CSS,debemos mencionar que el c贸digo de imagen CSS m谩s utilizado para colocar este elemento es 鈥渂ackground-image鈥, el cual tiene una sintaxis m谩s extensa, si quieres insertar otros factores: 鈥渂ackground-image: url | none | inherit鈥. En esta l铆nea, 鈥渦rl鈥 se refiere a la localizaci贸n de fondo que tiene la imagen; y聽鈥渘one鈥 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, a pesar de que se consideren 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.

laptop y cuaderno en donde se visualizan c贸digos de programaci贸n CSSFuente: Pexels

驴Cu谩les son los tama帽os de imagen en CSS?

Para saber c贸mo centrar una imagen en CSS, debemos聽controlar el tama帽o de la imagen desde el c贸digo CSS. En efecto, puedes 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, en esta gu铆a sobre c贸mo centrar una imagen en CSS, debes tener 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 a esto, 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.

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 las longitudes y entender谩s la forma correcta de centrar una imagen en CSS.

Width (ancho)

Si quieres centrar una imagen en CSS, es esencial que conozcas los valores que se debes聽colocar. Estos son: <medida> | <porcentaje> | auto | inherit.

Se utilizan para establecer la anchura de un elemento (incluso, cuando necesitas alinear una imagen en CSS), con un valor inicial 鈥渁uto鈥; 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, si deseas centrar una imagen en CSS, son: <medida> | <porcentaje> | auto | inherit.

Se utiliza para establecer la altura de un elemento (incluso, en el proceso de la alineaci贸n central de una imagen CSS), con un valor inicial 鈥渁uto鈥 y puedes aplicarlo a cualquier factor en l铆nea, como por ejemplo: filas de tabla y grupos de filas de tabla.

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 se establece en relaci贸n con聽el elemento que contiene la plataforma. Tambi茅n, se pueden elegir colores y medidas CSS para la propia p谩gina.

Antes de continuar con nuestro estudio sobre c贸mo centrar una imagen en CSS, con respecto聽a las im谩genes, un beneficio r谩pido y eficiente de esta programaci贸n es que si solo se coloca un valor, ya sea para el ancho o alto de la imagen, la otra medida se configurar谩 autom谩ticamente. Como consecuencia, se conservar谩 a proporci贸n original y no se 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.

En conclusi贸n, estos son los pasos previos para聽centrar una imagen en CSS, ya que para hacerlo, necesitas mucho m谩s que solo saber el tama帽o de la gr谩fica que vas a utilizar.

c贸digo de programaci贸n CSS
Fuente: Pexels

驴Cu谩les son los pasos para 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 para alinear聽una imagen en CSS se efect煤a de la siguiente forma.

1. Aplicaci贸n de estilo

Este paso se aplica cuando tienes ciertos problemas para conseguir que tu elemento se centre聽de forma autom谩tica. Esto reducir谩 el esfuerzo de configuraci贸n y te har谩 la tarea m谩s sencilla.聽

Lo 煤nico que debes colocar para centrar una imagen en CSS es el siguiente c贸digo: .centrado{

2. Definici贸n de medidas

En este paso sobre c贸mo centrar una imagen en CSS, 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 al espacio dentro de la plataforma. Deber谩s colocar este c贸digo: margin-left: auto; margin-right: auto;}

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 se帽alamos antes, hay m谩s de una forma para centrar una imagen en CSS y sabemos que los programadores聽manejan diferentes plataformas inform谩ticas.聽

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

Fuente: Pexels

Opci贸n 1 para centrar una imagen en CSS

Entonces, si la t茅cnica anterior para centrar una imagen en CSS no te funciona, entonces debes seguir los siguientes pasos:

1. Identificaci贸n聽del navegador

El primer paso para centrar una imagen en CSS, es identificar el navegador que utilizas, ya que esta opci贸n funciona solo en algunos sistemas. Si es Internet Explorer, lamento informarte que este modo para alinear una imagen en CSS no funcionar谩, pero para plataformas como Chrome, Firefox y Safari, s铆 tiene resultados exitosos.

2. Asignaci贸n de聽una etiqueta

Ccomo segundo paso para lograr una imagen centrada en CSS, deber谩s asignar una etiqueta 鈥imga la propiedad del elemento de bloque. Tambi茅n, el valor 鈥auto鈥 para el 鈥渕argin鈥. 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; }

programadora trabaja en sus computadoras para centralizar un contenido en CSSFuente: Pexels

Opci贸n 2 para centrar una imagen en CSS

Si ninguna de las dos opciones anteriores para centrar una imagen en CSS te funcion贸, esta segunda alternativa puede resultar m谩s 煤til. De hecho, puede ser que tu plataforma funcione solo para renderizar las im谩genes en modo inline y no con margen autom谩tico. Ten en cuenta que en esta alternativa, para poner una imagen en el centro en CSS, los elementos inline son los enlaces, controles, input, span, etc.

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 que聽todos los elementos se centren, como las im谩genes.聽Un ejemplo de c贸mo puedes centralizar con CCS se muestra a continuaci贸n:

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

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

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 es sencillo. El c贸digo que necesitas colocar para centrar una imagen en CSS, es el siguiente:

.centrado{

display:block;

margin-left: auto;

margin-right: auto;

}

c贸digo de programaci贸n CSS en una laptopFuente: Pexels

Opci贸n 3 para centrar una imagen en CSS

Otra v铆a para centrar una imagen en CSS es colocarla de forma vertical. Para esto, el proceso te lo presentamos a continuaci贸n:

1. Elemento de celda

El primer paso para centrar una imagen en CSS es hacer que el elemento gr谩fico que quieres alinear聽est茅 dentro de una celda en una tabla. Esto, con el fin de utilizar el estilo vertical-align que tienen las tablas.

2. Definici贸n de altura

Luego, para continuar con este procedimiento de c贸mo centrar una imagen en CSS, es importante darle una determinada altura. Para eso, 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 en relaci贸n con esta opci贸n para centrar una imagen en CSS, es que la聽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.

joven programador analiza c贸mo centrar una imagen en CSS en su mesa de trabajoFuente: Pexels

驴C贸mo alinear聽una imagen en CSS en una p谩gina web?

HTML y CSS son poderosos lenguajes inform谩ticos. Seg煤n un estudio de Adobe Dreamweaver, un sitio en l铆nea creado a partir de CSS, emplea un formato de hojas de estilos en cascada, en vez de los marcos HTML. De este modo, el contenido CSS est谩 organizado por medio de etiquetas div, que es considerada una etiqueta HTML que contiene contenido textual y visual como im谩genes, as铆 como tambi茅n otra clase de componentes del sitio.聽

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

T茅cnica ASP.NET para centrar una imagen en CSS

El m茅todo para alinear elementos con CSS que mostraremos a continuaci贸n se puede utilizar tanto para im谩genes, as铆 como para cualquier otro tipo de elemento. Est谩 disponible para HTML y聽CSS, en la t茅cnica ASP.NET. Incluso, se puede utilizar en aplicaciones m贸viles como Mobile RPG.

1. Introducci贸n base

Como primer paso para centrar una imagen en CSS, el uso de la t茅cnica ASP.NET te permite introducir inicialmente el c贸digo HTML para luego colocarle el CSS.

Entonces, si buscas alinear una imagen en CSS, lo que debes colocar es el c贸digo control 鈥渁sp:Image鈥.

2. C贸digo

En el segundo paso de esta opci贸n para centrar una imagen en CSS, la etiqueta HTML 鈥渋mg鈥 sirve para mostrar la imagen.聽Este es el c贸digo CSS para centrar im谩genes:

<div id="logo-container">

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

</div>

3. C贸digo CSS

Al trabajar el c贸digo CSS con el 鈥渋mg鈥 de HTML, se genera un control m谩s eficiente en la ejecuci贸n del c贸digo 鈥渁sp:Image鈥.

El fichero que se debe colocar en CSS se encuentra del siguiente modo:

Themes/Current/Styles/Theme.css

聽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" />

dos programadoras trabajar con la centralizaci贸n de im谩genes en CSSFuente: Pexels

驴C贸mo centrar una imagen con CSS mediante Flexbox?

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 una imagen en CSS de forma pr谩ctica.

驴Qu茅 es Flexbox?

Flexbox es un m贸dulo de dise帽o de CSS3, que tiene como finalidad optimizar el dise帽o responsivo, a trav茅s de una disminuci贸n de la cantidad de c贸digo escrito. Como consecuencia, se mejora el posicionamiento de los componentes; incluso, sin tener una certeza de cu谩l es su dimensi贸n.聽

En resumen, Flexbox es un recurso que todos los programadores deben conocer, no solamente para saber c贸mo centrar una imagen en CSS, sino tambi茅n porque permite la alteraci贸n del ancho, alto y la posici贸n de los elementos de una forma optimizada en funci贸n del espacio que se tiene disponible.聽

En simples palabras, utilizando Flexbox, podr谩s alinear dentro de un contenedor, no solamente im谩genes, sino tambi茅n otro tipo de elementos, como es el caso de videos y textos.

驴C贸mo son los contenedores y declaraciones de Flexbox?

Antes de seguir con nuestro an谩lisis sobre c贸mo centrar una imagen en CSS con Flexbox, debemos mencionar que desde una perspectiva estructural, est谩 determinado por dos tipos de contenedores:聽

  • Contenedores padre o contenedores-Flex: es el que contiene la totalidad de elementos hijos que necesitan ser posicionados.聽
  • Contenedores hijos o Elementos Flex: el elemento hijo usar谩 el espacio en disposici贸n para obtener una ubicaci贸n, en funci贸n de las propiedades a las que est谩 sujeto, al igual que los restantes Elementos-Flex.聽

Por otra parte, aqu铆 te presentamos las declaraciones principales de Flexbox para que puedas centrar una imagen en CSS sin problemas:

  • Display-flex: determina el contenedor con las cualidades de un contenedor flexible. Asimismo, brinda flexibilidad al resto de hijos directos.聽
  • Justify-content: al centrar una imagen en CSS con Flexbox, esta declaraci贸n gestionar谩 la alineaci贸n horizontal de las im谩genes y del resto de los elementos que forman parte de los contenedores flexibles.聽
  • Align-items: efect煤a el control de la alineaci贸n vertical de los elementos en el interior del contenedor flexible.聽
  • Flex-direction: establece cu谩l es la direcci贸n de los elementos flexibles.

programadoras centran elementos en CSS Fuente: Pexels

驴Cu谩les son los pasos para centrar una imagen en CSS?

Pues bien, ahora que te hemos presentado algunos conceptos b谩sicos de Flexbox, pasemos a mostrarte c贸mo centrar una imagen en CSS usando las cualidades de alienaci贸n de Flexbox.

El procedimiento de centrar una imagen en CSS con Flexbox requiere de la creaci贸n de un contenedor y de declarar la propiedad 鈥渄isplay: flex鈥. A continuaci贸n, te brindaremos el c贸digo para que puedas centrar una imagen en CSS en forma vertical y horizontal con Flexbox. Ello, utilizando las propiedades: 鈥渏ustify-content: center鈥 y 鈥渁lign-items:center鈥, como puedes ver en el siguiente c贸digo:

c贸digo CCS alineaci贸n central

Fuente: Eniun

Asimismo, ten en cuenta que si buscas centrar una imagen en CSS por medio de Flexbox, puedes utilizar las funciones 鈥淔lex-start鈥 al inicio o 鈥淔lex-end鈥 al final.聽

c贸digo para centrar una imagen con Flexbox

Fuente: MDN Web Docs

Por otra parte, recuerda聽que en futuras ocasiones, no necesitar谩s de la creaci贸n de un contenedor dentro de un contenedor flexible, si buscas centrar un elemento 煤nico. Esto se debe a que las cualidades de alineaci贸n suelen implementarse en el dise帽o en bloque.

De todos modos, al utilizar Flexbox, puedes convertir un contenedor en un contenedor flexible. Despu茅s, usa 鈥淎lign-items鈥 en el elemento principal; o tambi茅n, puedes apuntar el elemento de flexi贸n con 鈥淎lign-self鈥.聽

Otra de las opciones para centrar im谩genes en CSS con orientaci贸n vertical y horizontal consiste en utilizar la propiedad transform. En efecto, a trav茅s de esta metodolog铆a, podr谩s llevar a cabo la alineaci贸n no solamente de im谩genes, sino tambi茅n de contenedores. Sin embargo, no podr谩s alinear textos, ya que este m茅todo no contempla la dimensi贸n de la letra.

Aqu铆, te presentamos el c贸digo para que puedas centrar tus im谩genes en CSS con transform sin inconvenientes:

c贸mo programar con CCS Flexbox

Fuente: Eniun

驴Cu谩les son los beneficios de alinear una imagen al centro en CSS con Flexbox?

Entre las principales ventajas de centrar una imagen en CSS con Flexbox, se pueden mencionar las siguientes:

  • Si se desea llevar a cabo la alineaci贸n de im谩genes y otro tipo de elementos, Flexbox te permite utilizar anchos y alturas con un alto grado de flexibilidad.聽
  • Es ideal para dise帽ar p谩ginas que est茅n optimizadas desde una perspectiva del dise帽o responsivo.
  • Permite reemplazar los float o position al centrar una imagen en CSS u otra clase de elementos.聽
  • Flexbox te permitir谩 poner una imagen al centro en CSS y se diferencia por brindar un soporte de calidad, ya que la mayor铆a de los navegadores web han incorporado gran parte de las funciones de este recurso. De acuerdo con un an谩lisis de Forbes, optimizar el grado de compatibilidad entre los distintos navegadores de la web constituye uno de los principales desaf铆os para los programadores que se encargan de la creaci贸n de sitios en l铆nea.
    As铆, se considera que Flexbox es compatible en un 97,72%, debido a que solamente las versiones IE10 e IE11 poseen una implementaci贸n parcial de Flexbox. En el caso de que decidas utilizar Flexbox para centrar una imagen en CSS y el proyecto que tienes que realizar se diferencia por tener un tr谩fico web considerable en estas dos 煤ltimas versiones, te aconsejamos que utilices los prefijos requeridos para evitar la presencia de la mayor cantidad de errores posibles.
    Por otra parte, tampoco es conveniente centrar im谩genes en CSS, si聽tu p煤blico objetivo usa versiones I8 e I9, ya que podr铆an presentarse errores de visualizaci贸n de gravedad.聽

驴Cu谩les son los principales errores al centrar im谩genes en CSS?

Al centrar una imagen en CSS, pueden suceder una serie de errores que es necesario detallar. Es que si bien al programar, se trabaja con inteligencia artificial, pueden suceder fallas humanas durante el proceso. Para evitarlas, al poner una imagen en el centro en CSS, apunta estos 铆tems y tenlos聽presentes para que puedas posicionar una imagen CSS sin inconvenientes:

  • Una de las principales fallas al centrar una imagen en CSS reside en errores al fijar la ruta del contenido. Para evitar este error, te recomendamos que verifiques el sitio en el que has guardado tu imagen antes de proceder a centrarla en CSS.
  • 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.
  • Otro de los posibles errores, al centrar una imagen en CSS, consiste en no colocar alg煤n punto y coma o llaves. Para no cometer estas fallas en la escritura del c贸digo, presta suma atenci贸n y revisa cada uno de los c贸digos que hayas escrito para centrar una imagen en CSS.
  • Tambi茅n, recuerda tener el mejor de los teclados para programadores. As铆, evitar谩s los problemas que suelen estar asociados con la escritura del c贸digo al centrar una imagen en CSS o al realizar cualquier tarea de programaci贸n web.聽

programadora centrando una imagen en CSSFuente: Pexels

Como ver谩s, si bien puede parecer complejo centrar una imagen en CSS, si sigues al pie de la letra esta gu铆a informativa sobre c贸mo poner una imagen al centro con este lenguaje de programaci贸n, podr谩s lograrlo sin problemas.

Recuerda que si deseas trabajar como programador de software, no basta con conocer c贸mo centrar una imagen en CSS, sino que deber谩s aprender desde la teor铆a, m煤ltiples conceptos y poder llevarlos a la pr谩ctica en cada uno de tus proyectos de desarrollo web.

Por eso, para terminar este an谩lisis sobre alinear im谩genes en CSS, te aconsejamos que conozcas nuestros聽 cursos de Desarrollo web y tecnolog铆a.聽A trav茅s de estas instancias educativas, podr谩s adquirir todos las soft skills y hard skills para hacer de tu sue帽o de ser un desarrollador full stack, una realidad concreta.

隆Nos vemos en el pr贸ximo art铆culo!