Texto en los lados de una img

Texto arriba abajo y en todos lados de una imagen

Deja tu comentario

Y haora vamos a convinar el texto con las imagenes... vamos a poner texto arriba, abajo, a la derecha, izquierda de una imagen paso a paso, esto sera muy buena opcion para los que les gusta poner una imagen ilustrativa como por ejemplo en un articulo relacionado, alguna categoria o simplemente en una entrada o articulo.

Asi que vamos a empezar poniendo el texto al lado izquierdo de una imagen:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.

Y bueno para poner el texto al lado izquierdo de una imagen vamos a hacer flotar la imagen al lado derecho como ya lo habiamos explicado anteriormente en el Posicionamiento de imagenes, tambien vamos a ponerle un poco de margen a la imagen para el texto no quede pegado a la imagen justo asi:

Haora vamos a poner el texto al lado derecho de la imagen:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.

Y para poner el texto al lado derecho hizimos flotar la imagen a la izquierda y tambien posimos un margen para separar un poco el texto de la imagen justo asi:

Toca el turno de poner el texto arriba de la imagen:

Para poner el texto arriba de la imagen, lo que hice fue centrar la imagen y el texto, para que el texto quedara arriba primero puse el texto y despues la imagen justo asi:

Y haora toca poner el texto abajo de la imagen:

Para poner el texto abajo de la imagen cambie el orden es decir primero la imagen y despues el texto justo asi:

Y con esto hemos acabado de poner el texto en todos los lados de la imagen, entonces queda en claro que nosotros tenemos el control de colocar texto en cualquier lado de una imagen.

Volver arriba ↑ CSS/HTML

Acerca del autor

Manolo M./Administrador
Les cuento un poco sobre mi... soy un aficionado en todo lo relacionado con las paginas web, haora estoy enamorado de mi pagina web en la cual se comparten conocimientos, ideas... Leer mas

 

Algunas categorias

Interesante
Aqui hablaremos de articulos de interes y debate.

Interesante

Recursos
En esta categoria encontraras, recursos utiles para tener un buen desempeño web.

Recursos