10 Oct 2013

Alinear el texto con imágenes en CSS: arriba, en el medio o abajo

Si queremos alinear texto al lado de una imagen con HTML y CSS muchas veces nos encontramos con el problema de que no queda alineado del modo que nos interesa, ya que por defecto se alinea abajo. La solución pasa por usar la regla de CSS “vertical-align“, que nos va a permitir que el texto se empiece a escribir en la parte de arriba de la imagen, desde el centro o en la parte inferior.

Por ejemplo:

Cubo AzulAlineamos arriba

Cubo AzulAlineamos en el centro

Cubo AzulAlineamos abajo

 

Éste es el código CSS usado:

Selec All Code:
1
 

 

Si por ejemplo quisieramos alinear el texto en la parte superior podríamos usar el siguiente código HTML:

Selec All Code:
1
 
Share this
09 Oct 2011

Cabecera aleatoria en WordPress

En uno de nuestros proyectos, la página Web www.movimientosdegenero.com, pensamos junto con la administradora del Blog la idea de una cabecera que cambiase aleatoriamente con cada cambio de página y que además fuese un proyecto participativo (base del 2.0). Lo que hicimos es que los visitantes pudieran enviar su foto y que ésta apareciese tanto en la cabecera de la Web como en una galería. Esta estrategia está acorde con el concepto de Neuromarketing que explicamos en una entrada anterior.

En lo que concierne a la parte técnica, la idea es cargar una imagen diferente cada vez que se llama al archivo PHP que carga el “header”. Aunque la página donde lo hemos programado es un WordPress, se puede aplicar en cualquier proyecto Web con PHP. En nuestro caso pusimos el siguiente código en el archivo “header.php” del theme de WordPress:

Selec All Code:
1
 

Con el código anterior ya tenemos un array con todas las imágenes del directorio elegido y un número entero aleatorio.

Aunque cada uno lo podéis usar como creáis, en nuestro caso, hemos utilizado el siguiente código HTML para imprimir nuestra cabecera.:

Selec All Code:
1
 

Esperamos que la información os sea útil, para cualquier duda podéis preguntar en los comentarios.

Share this

© 2010 Ruvic Soluciones Informáticas

Subir