Texto en los lados de una imagen

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:

<img style="float:right; margin:10px;" src="URL DE TU IMAGEN"/>Tu texto, texto, texto que estara al lado izquierdo de la imagen...

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:

<img style="float:left; margin:10px;" alt="" src="URL DE TU IMAGEN" />Tu texto, texto, texto que estara al lado derecho de la imagen...

Toca el turno de poner el texto arriba 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.

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:

<center><p>Tu texto, texto, texto que estara arriba de la imagen</p></center>
<center><img style="margin:10px;" alt="" src="URL DE TU IMAGEN" /></center>

Y haora toca poner el texto abajo 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.

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

<center><img style="margin:10px;" alt="" src="URL DE TU IMAGEN" /></center>
<center><p>Tu texto, texto, texto que estara abajo de la imagen</p></center>

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.