Imágenes centradas horizontalmente

Este truco sirve para conseguir que las imágenes,(o cualquier otro elemento) se centre horizontalmente.

Se define la siguiente regla:

.centrador{text-align:center;}

Después bastará con introducir entre las etiquetas <div class="centrador"> y </div> todo aquello que queramos centrar. Para centrar una imagen bastará utilizar el siguiente código:

<div class="centrador"> <img src="ruta_imagen" alt="Texto alternativo" /></div>

Como ejemplo aqui tenemos una imagen centrada horizontalmente:

Una imagen

De esta forma se consigue centrar la imagen dentro del contenedor que la alberga. Si queremos que la imagen (y todo el contenido de la página) quede centrado respecto de la pantalla, podemos hacerlo estableciendo la siguiente regla para el body

body{display:block; position:relative; width:60%; left:20%;}

Donde, está claro, que los porcentajes dependerán de los gustos de cada uno.