Utiliser les styles en ligne pour positionner l'image centrée verticalement à gauche du paragraphe de bloc?

Question

J'essaie de positionner une image centrée verticalement à gauche d'un bloc de texte. L'image est 100x100 et le texte dépasse cette hauteur. Je ne veux pas que le texte soit placé sous l'image, mais reste dans un bloc du côté droit. Besoin d'accomplir tout cela avec des styles en ligne que je travaille dans un CMS. J'ai également besoin d'une petite marge entre le côté droit de l'image et le côté gauche du bloc de texte.

Le plus proche que j'ai pu venir est le code suivant, mais le texte est derrière l'image ici, et je ne pense pas que l'image soit vraiment centrée verticalement.

<div style="position: relative;"><img style="margin: 0; position: absolute; top: 10%;" src="http://placehold.it/100x100" alt="" /> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor velit nec fringilla imperdiet. Sed at ornare urna. Nullam libero ante, vulputate sit amet semper vitae, efficitur ac velit. Donec egestas nibh eu tortor imperdiet, eget feugiat ligula porttitor. Ut orci nulla, sollicitudin sit amet elit pretium, consequat ultricies tellus. Proin nec magna id elit egestas malesuada a non tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nunc risus, facilisis eget viverra quis, imperdiet ut nisl. </p> 
 
</div>

Answer 1

Vous pouvez le faire simplement avec FlexBox (Internet Explorer> 9):

<div style="display:flex;align-items:center;justify-content:center;"> 
    <div> 
    <img style="margin-right:20px;" src="http://lorempixel.com/100/100/" alt="" /> 
    </div> 
    <div style="align-self: flex-start;"> 
    <p style="margin:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor velit nec fringilla imperdiet. Sed at ornare urna. Nullam libero ante, vulputate sit amet semper vitae, efficitur ac velit. Donec egestas nibh eu tortor imperdiet, eget feugiat ligula porttitor. Ut orci nulla, sollicitudin sit amet elit pretium, consequat ultricies tellus. Proin nec magna id elit egestas malesuada a non tortor. Ut orci nulla, sollicitudin sit amet elit pretium, consequat ultricies tellus. Proin nec magna id elit egestas malesuada a non tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nunc risus, facilisis eget viverra quis, imperdiet ut nisl. Ut orci nulla, sollicitudin sit amet elit pretium, consequat ultricies tellus. Proin nec magna id elit egestas malesuada a non tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nunc risus, facilisis eget viverra quis, imperdiet ut nisl</p> 
    </div> 
</div> 

Lien vers un jsFiddle pour le test en direct: https://jsfiddle.net/fq2kc5z1/1/