インラインスタイルを使用して、ブロック段落の左に垂直に中央の画像を置き換えますか？

Question

私は、テキストのブロックの左側に垂直に中心の画像を配置しようとしています。画像は100x100で、テキストはこの高さを超えています。私は、テキストがイメージの下に折り返されるのではなく、右側に1つのブロックに留まることを望んでいます。私がCMSで作業しているときに、このすべてをインラインスタイルで処理する必要があります。私はまた、イメージの右側とテキストブロックの左側の間に小さなマージンが必要です。

私が一番近かったのは次のコードですが、テキストはここの画像の後ろにあります。イメージが真に垂直にセンタリングされているとは思いません。

<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

あなたは、単にフレキシボックスでこれを行うことができます（インターネットエクスプローラ> 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> 

ライブテストのためのjsfiddleへのリンク：https://jsfiddle.net/fq2kc5z1/1/