Las hojas de estilo en cascada (CSS) permiten que separemos la estructura de una web de su presentación o diseño. Sin tocar el código de la web, podemos cambiar los elementos de posición, el tamaño de los textos, los colores de fondo, etc. Tan sólo haciendo modificaciones en el fichero CSS.
Éste no pretende ser un post larguÃsimo predicando las ventajas del CSS, sencillamente voy a hablaros de cómo centrar imágenes o alinearlas a cualquier lado usando las hojas de estilo. Aunque primero vamos a hacer un recorrido sobre la alineación de las imágenes en sus comienzos y luego seréis vosotros quienes saquéis la conclusión sobre si CSS es mejor o no 🙂
Para una mejor comprensión de este texto, es recomendable tener ciertas nociones básicas de HTML y uso de CSS.
HTML: El origen
La etiqueta <img>
(que nos permite añadir imágenes en nuestra web) admite el atributo align
que puede tomar los siguientes valores: left, right, top, texttop, middle, absmiddle, bottom, absbottom, baseline. Cada valor permite que podamos alinear la imagen a la izquierda, derecha, etc. con respecto al texto o contenido.
Si queremos alinear una imagen a la derecha tendrÃamos que escribir:
<img src="imagen.jpg" alt="Esto es una imagen" align=right>
El problema: tenemos que conformarnos con la alineación que hace el navegador. Si no nos gusta, por ejemplo, que la imagen se pegue tanto al margen o queremos que esté algo más separada del párrafo o elemento anterior, el código cambiarÃa de esta manera:
<img src="imagen.jpg" alt="Esto es una imagen" align=right vspace=20 hspace=10>
ConseguirÃamos que la imagen tuviera una separación superior e inferior de 20 pixels (vspace
) y una lateral (hspace
) de 10 pixels.
El código ha crecido, aunque no supone ningún trauma, ¿no? Ahora, piensa, si un dÃa decides cambiar el aspecto de tu web y no prefieres que las imágenes tengan el mismo margen lateral y quieres poner un valor menor, ¿qué tendrÃas que hacer? Cambiar uno a uno todos los valores de hspace
que haya en todas las imágenes (es muy probable que sea más de una) que tengas en tu web. Un gran problema, ¿verdad? Afortunadamente, la historia evoluciona 🙂
XHTML + CSS: La elegancia
Con las hojas de estilo, somos nosotros los que podemos cambiar el comportamiento por defecto de las etiquetas. En nuestro caso, queremos modificar el comportamiento de la etiqueta <img>
. Veamos lo que tendrÃamos que hacer para darle un margen lateral de 10 pixels:
img { margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px }
Y obtendrÃamos el mismo resultado que <img src="imagen.jpg" alt="Esto es una imagen" align=right vspace=20 hspace=10>
. (Podéis pensar que vspace
es equivalente a margin-top
y margin-bottom
; y hspace
serÃa equivalente a margin-left
y margin-right
.)
Seguro que estáis pensando que hay que escribir más usando CSS que de la forma «antigua». Antes de seguir pensando, mirad lo siguiente:
<img src="imagen.jpg" alt="Esto es una imagen" />
Ya está, usando asà la etiqueta <img>
obtendremos la presentación que querÃamos ya que usará el estilo que hemos definido para esa etiqueta en nuestra hoja de estilos. Decidimos el aspecto de cada elemento en la CSS y no en nuestro código.
Esperad, que hay más. Podemos abreviar la definición del estilo:
img { margin: 20px 10px 20px 10px }
Y es exactamente lo mismo. Para entender a qué corresponde cada valor, empieza como si fueran las doce (en un reloj de aguja) y ahora desplázate en sentido horario. Entonces, serÃa margin-top
(20px), margin-right
(10px), margin-bottom
(20px) y margin-left
(10px). No es complicado y nos hemos ahorrado 3 lÃneas.
¿Pero qué pasa con la alineación? Bueno, bueno, ahora nos ponemos, ¡qué impacientes! PodrÃamos usar también el atributo align
, pero nosotros queremos tener un control total, aplicar nuestra propia alineación a la derecha o izquierda. Sin más preámbulos, un posible estilo para alinear una imagen a la derecha:
img.derecha { float: right; margin: 0 0 20px 20px; display: block }
Con float
hacemos que la imagen se desvincule del flujo normal del documento y que se vaya a la derecha del mismo. Con el atributo margin
establecemos el margen respecto al resto de elementos de la página que rodean la imagen. Y con display
hacemos que se comporte como un elemento de bloque (ya que img
es un elemento en lÃnea).
En nuestro XHTML: <img class="derecha" src="imagen.jpg" alt="Esto es una imagen" />
FÃjate que tenemos un atributo nuevo class
cuyo valor es el de nuestro estilo (podemos darle el nombre que queramos a nuestro estilo que para eso es nuestro. «derecha» me pareció bastante descriptivo :-P). Por decirlo de alguna manera, es la forma que tenemos para decir que queremos usar ese estilo en esta etiqueta.
¿Y si queremos alinear a la izquierda?
img.izquierda { float: left; margin: 0 20px 20px 0; display: block }
Para usarlo: <img class="izquierda" src="imagen.jpg" alt="Esto es una imagen" />
Complicado, ¿eh? Venga, ya que estamos animados, ahora vamos a centrar la imagen:
img.centrar { margin: 10px auto; display: block }
Y para usarlo: <img class="center" src="imagen.jpg" alt="Esto es una imagen" />
.
¿Sólo eso? Esperad, que aquà hay un poco más de «chicha». Si sólo ponemos dos valores en el atributo margin
, el primero hace referencia a margin-top
y margin-bottom
; el segundo se aplica a margin-right
y margin-left
. Otra forma de ahorrar. Maravilloso 🙂 Pero, ¿qué es esto de auto
? Aquà podemos tener algún problemilla con cierto navegador. El valor auto
le dice al navegador que calcule (asà no lo hacemos nosotros) el mismo margen en ambos lados (en este caso) consiguiendo asà que la imagen quede centrada. Sin embargo, hasta la versión 7 del Internet Explorer (si no me equivoco), este navegador (y puede que alguno más) no interpreta correctamente el valor auto
, asà que habrá que hacerlo a mano si te importan los usuarios de ese «navegador».
Para acabar, si ahora quisiéramos alinear una imagen que antes estaba centrada, bastará con poner derecha
o izquierda
donde antes estaba centrar
(en el atributo class
).
Y eso es todo, aunque apenas he hecho un esbozo de todo lo que se puede hacer con CSS y, en este caso, las imágenes. No he querido entrar en muchos detalles, sólo explicar lo más importante. Por supuesto que si quedan dudas, sólo tenéis que disparar 🙂
Hala, a alinear imágenes como los mayores 😛
12 respuestas a «Alineación de imágenes con estilo»
Tengo un problema con un tema de wordpress
está en dos columnas y al parecer las imagenes afectan el sitio y se desordena.
He buscado ayuda en muchos lugares, pero no he podido arreglarlo.
RogarÃa verificar para ver si es que tiene ud alguna respuesta.
Gracias.
TendrÃa que ver tu diseño para ver cuál es el problema. Te echaré una mano en lo que pueda.
Simplemente pasaba a felicitarte por el sitio (me encanta el diseño!).
MuchÃsimas gracias, rafaelinux. No suelo recibir crÃticas (y encima buenas) sobre el diseño del blog 😉
si uso dos o más de dos imagenes en un index y quiero alinearlas todas según mi criterio … he creado clases para cada una de ellas pero al perecer no se puede … es decir tengo la clase principal (( imagen central ))y funciona y las otras clases que son imagenes cercanas a la principal no funcionan me podrÃas explicar por qué ? o si estoy haciendo algo mal te dejo el la clase principal y una de las imagenes cercanas
img.center{
margin-top: 150px;
margin-bottom: 140px;
margin-left: 140px;
margin-right: 100px
}
img.otra{
float:left;
margin-top: 1px;
margin-bottom:1px;
margin-left: 750px;
margin-right: 20px
}
No entiendo muy bien lo que quieres hacer, fuser. De todos modos si ya usas
float: left
, no necesitarÃas darle un valor tan grande amargin-left
, ya que lo desplazarás mucho a la derecha y sin embargo estás flotando la imagen a la izquierda. ¿Entiendes la contradicción? Quizás lo que quieres hacer esfloat: right
y no ponermargin-left
. Pruébalo y me cuentas. También puedes mandarme una captura de lo que te sucede.mediante un archivo css externo podemos prescindir de poner en cada imagen alt=»»
existe un estilo para img que sirva para que ninguna imagen aparezca con comentarios?
gracias
Añadir el atributo
alt
con una breve descripción de la imagen es muy útil cuando el navegador no puede mostrar las imágenes o se trata de un navegador en modo texto. No se verá la imagen, pero sà algo como «logo de mi tienda de gominolas» o lo que hayas puesto enalt
, asà se puede adivinar de qué trata la imagen.¿A qué te refieres con que la imagen aparezca con comentarios? Si te refieres a una descripción que aparece cuando colocas el puntero del ratón sobre alguna imagen usando algún navegador, se debe a que has añadido el atributo
title
al código de la imagen.Recuerda:
alt
se usa como alternativa cuando no se puede mostrar la imagen por alguna razón.title
se usa para añadir alguna información extra sobre el contenido, en este caso una imagen, pero puedes prescindir de ella en ese caso.Hola amigo:
Como hago para que mi imagen pueda aparecer con pie de foto o sea con algo que me identifique que es la foto, que no sea el texto alternativo? He intentado con todas las formas del float, con tablas, con div. etc, y no he logrado que la foto se me ubique con el texto alrededor y con un pie de foto.
Muy buen informe! Me sirvió bastante.
hola a todos saludos =)
Vaya que excelente explicación! Lo entendi todito todito 🙂