Posición de textos e imágenes

Una de las cosas que mas impresiona al leer algún post es cuando vemos textos tipo periódicos o imágenes que son envueltas por un texto, aunque la etiqueta es un poco complicada al verla por primera vez realmente es sencillo usarla debido a que en ella existe una palabra clave la cual nos permitirá realizar el posicionamiento que deseamos.

Posición Izquierda

Textos

Empezaremos con lo mas sencillo que es un texto, para poder alinearlo en la parte izquierda usaremos <div class=”pull-left”>contenido</div> donde “contenido” lo sustituiremos por toda información que  deseamos reflejar, en este caso vamos a usar la siguiente frase “El trabajo duro y la pasión, son las únicas claves para el éxito, así que nunca olvides esos dos ingredientes si lo que quieres es triunfar”, veamos como quedaría el código y su resultado final:

<div class="pull-left">"El trabajo duro y la pasión, son las únicas claves para el éxito, así que nunca olvides esos dos ingredientes si lo que quieres es triunfar"</div>

Texto alineado a la izquierda

A estos textos también le podemos aplicar etiquetas de justificado, letras cursivas entre otras, por ejemplo deseo justificarlo, el código quedaría de la siguiente manera:

<div class="pull-left"><div class="text-justify"><p>"El trabajo duro y la pasión, son las únicas claves para el éxito, así que nunca olvides esos dos ingredientes si lo que quieres es triunfar"</p></div></div>

Texto justificado alineado a la izquierda

Todo depende de la visualización que quieras darle a tus escritos, recuerda que si no sabes como aplicarles formatos a los textos puede ir al siguiente link donde lo explicamos de una manera mas detallada.

Imágenes

Al igual que los textos podemos colocar imágenes alineadas a la izquierda, para eso aplicamos el mismo código, solo que en vez de texto colocaremos la imagen, veamos el siguiente código:

<div class="pull-left">https://cdn.steemitimages.com/DQmeiUyh4y3fBKbRubxGje7TNXaBXXE7KvikXA4bgVqvLu2/beach-3468107_960_720.jpg</div>

Imagen alineada la izquierda

A esta imagen también podemos colocarle su respectiva fuente que quede centrada en la alineación de la izquierda, para eso debemos usar la etiqueta correspondiente dentro del mismo código, lo podemos apreciar a continuación:

<div class="pull-left">https://cdn.steemitimages.com/DQmeiUyh4y3fBKbRubxGje7TNXaBXXE7KvikXA4bgVqvLu2/beach-3468107_960_720.jpg<center></div><a href="https://pixabay.com/es/playa-bebidas-c%C3%ADtricos-fr%C3%ADo-beber-3468107/"><strong>Fuente</strong></a></center></div>

Imagen con Fuente alineada a la izquierda

Recuerda que el link donde se aloja la imagen que usaras varía, si necesitas refrescar el uso de los hipervínculos puedes usar el siguiente link.

Posición Derecha

En este caso sería prácticamente el mismo código, solo que sustituiremos un atributo, el “left” por el “right”, el código quedaría <div class=”pull-right”>contenido</div>, usando el mismo texto e imágen del anterior ejemplo obtenemos el siguiente resultado:

Texto

<div class="pull-right">"El trabajo duro y la pasión, son las únicas claves para el éxito, así que nunca olvides esos dos ingredientes si lo que quieres es triunfar"</div>

Imagen

<div class="pull-right">https://cdn.steemitimages.com/DQmeiUyh4y3fBKbRubxGje7TNXaBXXE7KvikXA4bgVqvLu2/beach-3468107_960_720.jpg<center></div><a href="https://pixabay.com/es/playa-bebidas-c%C3%ADtricos-fr%C3%ADo-beber-3468107/"><strong>Fuente</strong></a></center></div>

Posiciones combinadas

Esto es lo que le da un aspecto increíble a las publicaciones, podemos realizar combinaciones de textos e imágenes colocándolos uno al lado del otro, para lograr esto existen varias formas, pero realizaremos la mas sencilla, primero debemos de tener en cuenta en que lado deseamos la imagen, ya con eso es suficiente debido a que el texto se colocara automáticamente en el lado opuesto, usando la misma imagen y texto anterior colocaremos la imagen a la izquierda y el texto a la derecha siguiendo el siguiente código.

<div class="pull-left">https://cdn.steemitimages.com/DQmeiUyh4y3fBKbRubxGje7TNXaBXXE7KvikXA4bgVqvLu2/beach-3468107_960_720.jpg<center></div><a href="https://pixabay.com/es/playa-bebidas-c%C3%ADtricos-fr%C3%ADo-beber-3468107/"><strong>Fuente</strong></a></center></div>

<div class="text-justify"><p>"El trabajo duro y la pasión, son las únicas claves para el éxito, así que nunca olvides esos dos ingredientes si lo que quieres es triunfar"</p></div>

Resultado Final

En este caso al texto no es necesario indicarle en que posición, simplemente debemos asignarla a la imagen, ten en cuenta que cuando el texto sobrepasa la imagen este lo cubrirá, haciendo un efecto bastante interesante el cual le gusta a bastantes lectores en la plataforma.

[Total: 0 Promedio: 0]

También te podría gustar...