Texto a la derecha de una imagen con CSS

22/Nov/2020 CSS Deja un comentario
Programación CSS

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:

Imagen sin Texto

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.

CSS Texto en base 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:

Texto a la derecha de una imagen con CSS

Ya habremos conseguido el tener texto a la derecha de una imagen con CSS.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.