HTML 5: 03.- CSS 1: centrar una imagen

jueves, 13 de enero de 2011

03.- CSS 1: centrar una imagen

Muchos de los temas de formato ya no se pueden hacer con tas tradicionales etiquetas.
Es lo que ocurre, por ejemplo, con <center> para centrar un objeto, una imagen por ejemplo.
Estos temas tienen que resolverse con CSS.
Hay tres niveles de declaración para estos estilos:

La hoja de estilos externa
La declaración para todo el documento en la cabecera del mismo
El estilo en una etiqueta al lado del elemento, en el body. El menos recomendado

Estos tres niveles de concreción es lo que da nombre a estos estilos "en cascada".
Vamos a ver cómo hemos centrado la imagen del logo del W3C en los ejemplos anteriores para crear el vínculo al W3C Validator.
La declaración se ha hecho en la cabecera del documento.
Ver el ejemplo concreto.

Éste es el código para declarar el estilo CSS. Se ha añadido border:none; para que la imagen no se marque con el borde azul que en principio tienen las imágenes que son vínculos.

<style type="text/css">

IMG.imgcenter{

      display: block;

      margin-left: auto;

      margin-right: auto;

      border:none;

      }

</style>

Luego, en la etiqueta de la imagen, hay que escribir el atributo que llama a este estilo: class="imgcenter".

<img src="img/validator.png" alt="W3C_validator" width="80" height="15" class="imgcenter">

Éste es el código completo de la página creada:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Tipo de documento</title>

<style type="text/css">

IMG.imgcenter{

      display: block;

      margin-left: auto;

      margin-right: auto;

      border:none;

      } 

</style>

</head>

<body>

<p>Esto es un documento para mostrar cómo centrar una imagen.</p>

<p>Hacemos una declaración de estilo CSS en la cabecera del documento y le ponemos un nombre para referenciarlo luego desde el atributo "class" de la etiqueta de la imagen.</p>

<p>Pulsa sobre la imagen para comprobar que la página está correctamente escrita.</p>

<hr />

<a href="http://validator.w3.org/check/referer" title="Pulsa para comprobar la validez del código de la página">