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

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

13 comentarios:

  1. Una imagen es en principio un elemento en línea, como el texto, y para centrarla dentro de un div, basta con declarar text-align:center en ese div (no en la imagen). Para centrar el contenedor div en la página o en otro contenedor, yo uso margin:0 auto, ya que es un elemento de bloque.

    ResponderEliminar
  2. Sí, pero div ya está obsoleto y la historia aquí es usar lo nuevo que nos da HTML5

    ResponderEliminar
  3. Segun html5 tiene una etiqueta llamada figure a la hora de tener la imagen dentro de esta etiqueta como la centro ya que este estilo solo funciona si la imagens esta en el body

    ResponderEliminar
  4. el div no esta obsoleto, eso es mentira ... ademas no importa ... lo que importa es el ejemplo de CENTRAR UNA IMAGEN XD

    ResponderEliminar
  5. Muchas gracias. A mi me funciona perfecto para un caso sencillo de centrar una imagen.

    ResponderEliminar
  6. Muchas gracias por tu aporte, me fue muy útil.

    ResponderEliminar
  7. center es de html4 ya en html5 no se usar...se podria pero si los verificas en el validador salta error

    ResponderEliminar