texte entourant une image centrée dans un paragraphe

Question

Par exemple :

text text text text text text text text text text text text 
text text text text text text text text text text text text 
text text text text ------------------- text text text text 
text text text text |this is the image| text text text text
text text text text ------------------- text text text text 
text text text text text text text text text text text text 
text text text text text text text text text text text text 

Est-ce possible ?

Answer 1

Voici un bon article sur l'utilisation des pseudo-éléments.

http://css-tricks.com/float-center/

Answer 2

Il est possible ...

<p style="font: 12px Arial, sans-serif; width: 300px;">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nunc a neque vehicula mollis. Sed ac augue a purus

    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 

    congue aliquet vitae id libero. Aenean porttitor &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ultricies neque. Cras lorem nulla, rhoncus &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id est at, luctus mattis magna. Sed imperdiet &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
    vel risus id luctus. Donec efficitur ar &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pharetra. Donec tincidunt ligula magna, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; et gravida orci lacinia quis. In semper congue nisl, a &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pretium augue euismod et. Suspendisse felis nibh, feugiat vel mollis eu, dapibus tempus arcu. Etiam porttitor tortor nec gravida semper. Morbi metus lorem, volutpat ac varius

    <img  style="position:absolute; top:50px; left:90px; width:100px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5QMLAAIDscPueAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAF0SURBVEjHxdY7SxxRFADgT9EkiEUKIU98kMJKrVMHjJCAIFiINqZYBBu7NOlEbPwFNv4DCanEEDCFCoJWEUS2sAiCJogoKQxZ1+YOLMNOnFlnxwOnuWfmfty5j7nUj26cYFiB8RA7qAb8eVHwckCj3EBbs9GpGBrlfDPRQfxJgCt42wz0McoJaJSneJEn2oLVW9Aov+c5359SolEu5AX/ywhXMJIHvJoRruIXXv6nz8m0+HjoLAu+jfY6fb0OX+VNWvxJA6NfrHPq7YfaTli4soz+d0r4GqM17y7G6u+yzvtTfE6Jn6EXQ/gbq+1mHXUU0zhPgW9iL6E21uiqf4YvDaz8KH+g9S7bbjx81kbwibvu+R58vQUphymq1LQd5nHUtqCEiwT4fXhuNtY+nddR24tvsc7XY88s1dSO8CDPP1sJl7hCf536Sg0+k/f//BU+JNTasRbgn3hU5AWyA1sBn1NwdOEg3GQ6i8b7cIyP7iEGUL4BlT/pqRe12YMAAAAASUVORK5CYII=">

</p>

1. Faire un paragraphe p avec une taille de police et une largeur fixes.
2. Créer une image img positionné de manière absolue.
3. Mettre en place des espaces de non rupture   où l'image est superposée.