Un artículo muy sencillo, útil y que me habéis pedido en algún comentario, es cómo puedo poner texto a la derecha de una imagen con CSS. Si estáis aprendiendo HTML una de las cosas que seguro habréis hecho es el poner una imagen en vuestra página web. El código será algo así:
<img src="imagen.jpg" width="240" height="240" alt="Foto de Ejemplo"/>
Ya tendréis una imagen cargada en vuestra página. Algo que se visualizará de la siguiente manera:
Ahora vamos al texto, ya que queremos poner texto a la derecha de la imagen con CSS. Así que, sin más, añadimos el texto detrás del elemento IMG.
<img src="imagen.jpg" width="240" height="240" alt="Foto de Ejemplo"/> Texto para alinear a la derecha de la imagen.
Lo que sucederá será que el texto se situe a continuación de la imagen.
Bueno, el texto se a situado a la derecha de la imagen. Pero como comentábamos se queda en la base de la imagen, es decir no empieza en la parte superior de la imagen y deja vacio todo el espacio que existe a la derecha de la imagen.
Si lo que queremos es que ocupe todo el lateral derecho lo que haremos será acudir a las propiedades CSS de la imagen. La primera propiedad que modificaremos será float. Mediante float lo que indicamos es que la imagen se situe a la izquierda del texto si le asignamos el valor left. Por lo que así conseguimos que el texto se quede a la derecha. Si bien es verdad que el texto se va a quedar muy pegado a la imagen, lo que puede resultar un poco molesto o con mal diseño. Es por ello que acudiremos a una segunda propiedad que se llama padding-right, la que nos permitirá establecer una separación de la imagen y el texto. Por ejemplo podemos indicar que hay 10px de separación
De esta manera podríamos tener el siguiente código:
<img src="imagen.jpg" style="float:left; padding-right: 10px;" width="240" height="240" alt="Foto de Ejemplo"/> Texto para alinear a la derecha de la imagen.
El resultado será el siguiente:
Ya habremos conseguido el tener texto a la derecha de una imagen con CSS.
