Pregunta

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

Respuesta

Centrar una imagen (o cualquier otro elemento) siempre ha sido complicado en HTML, por lo general requieren hacks CSS off-by-one. Hace un par de años se introdujo un nuevo estilo de diseño CSS llamado "flex layout". Esta característica, que ahora se conoce generalmente como "CSS Flex" o "CSS Flexbox", tenía un soporte de navegador irregular en sus orígenes, pero ahora ha madurado para trabajar en todos los principales navegadores actuales (su implementación en IE 11 es irregular, pero no es este el ¡mayor navegador en la actualidad!). Flex ofrece una excelente forma de centrar un elemento en una página Web. Lea más acerca de CSS Flex aquí .

En este artículo muestramos cómo centrar una imagen en una página web, pero la técnica también funciona centrando cualquier tipo de elemento HTML en una página. Puede utilizar esta técnica con Wings, Visual RPG ASP.NET y Monarch. Incluso puede haber situaciones para las que esta técnica es útil con las aplicaciones móviles de Mobile RPG.

La imagen 1a más abajo muestra código HTML para mostrar una imagen. Los puntos suspensivos indican que que puede exisitir otro código HTML o ASP.NET en la página.

<body>
    ...
    <img id="logo-image" src="sunfarm.logo.png">
    ...
</body>

Imagen 1a. Código HTML básico para mostrar una imagen.


Cuando se muestra la imagen del código de la imagen 1a ésta queda justificada a la izquierda, como se muestra en la imagen 1b. (Nota: Después hablaremos del marco rojo)

Imagen 1b. La imagen mostrada con su justificación por defecto.


Para centrarla

Para centrar la imagen se debe montar entre una etiqueta div como se muestra en la imagen 2a. Observe que el id de la etiqueta div eslogo-container.

<body>
    ...
    <div id="logo-container">
        <img id="image1" src="sunfarm.logo.png">
    </div>
    ...
</body>
Imagen 2a. imginsertado en una etiqueta  div.


La etiqueta div puede que ya esté presente en su código, si no fuera así puede incluirla manualmente con el editor de Visual Studio. Con la etiqueta div bien situada, CSS muestra, como puede ver en la imagen  2b, usando dos selectores CSS, la imagen centrada.

#logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

#logo-container>img {
    max-width: 50%;
    border: 2px solid red;
}
Imagen 2b. Código CSS para centrar la imagen.


El código CSS del cuadro 2b centra la imagen, como se puede ver en la imagen 2c.

Imagen 2c. CSS la imagen aparece centrada con un borde rojo.


Lo que  CSS muestra en la imagen 2b usa un ID selector (#logo-container) para seleccionar la etiqueta divque contiene la imagen. Las almohadillas # indican quelogo-container es un elemento con ID. Asegúrese de que la  ID especificada aquí  coincide con la ID en tiempo de ejecución del contenido de laetiqueta  div.

El otro selector CSS de la imagen 2b utiliza un  child combinator selector para seleccionar la etiqueta imgdel elemento con el  ID de logo-container.

Para ayudar a identificar rápidamente los límites de la imagen (a veces hay un espacio transparente en la imagen que hace que la imagen parezca descentrada), el código CSS mostrado en la imagen 2d se incluye en la Imagen 2b:

border: 2px solid red;

Imagen 2d. CSS incluye un borde rojo alrededor de la imagen

El uso de un borde temporal como éste puede ayudar a ahorrar mucho tiempo en la resolución de problemas de centrado de imágenes. Un área transparente en una imagen puede hacerle triplicar la cantidad de código a escribir en su CSS sólo para descubrir que al final se trataba del espacio de la imagen transparente que estaba provocando que se vea mal. Una vez que esté seguro de que la imagen se coloca correctamente, puede eliminar el CSS relacionado con el borde rojo.

Usando ASP.NET

El código HTML anterior usa una etiqueta HTML img para mostrar la imagen. En  ASP.NET ASPX puede usar el control asp:Image como puede ver en el cuadro 3:

<div id="logo-container">
    asp:Image ID="image1" runat="server" ImageUrl="~/sunfarm.logo.png" />
</div>
Imagen 3. El contro asp:Image controla la presentación de una imagen


El código CSS que se muestra trabaja realmente bien con este control, porque en tiempo de ejecución el control asp:Imagese comporta como una etiqueta img de HTML..

Incorporando el CSS

En las aplicaciones de Wings, Monarch y Mobile RPG, existe un fichero CSS que puede encontrar en:

Themes/Current/Styles/Theme.css

y es un buen lugar para incorporar el código CSS que necesite.  Se puede encontrar la linea mostrada a continuación en la parte superior de Themes/Current/MasterPage.mastercomo Theme.css para insertarla en la página.

<link rel="stylesheet" type="text/css" 
      href="~/Themes/Current/Styles/Theme.css" />

Puede incorporar también su propio fichero de código CSS, pero en ese caso habrá que modificar la master page para incluirlo.

Las carpetas de estructuras AVR .NET ASP.NET son menos recomendadas y tienen menos contenido, por lo que en estos casos incluya código CSS en función de sus propios proyectos..

Additional information

Product/Platform: Wings, Monarch, Mobile RPG, and AVR for .NET