인라인 스타일을 사용하여 세로 가운데에 이미지를 블록 단락의 왼쪽에 배치 할 수 있습니까?

Question

텍스트 블록 왼쪽에 세로 중심 이미지를 배치하려고합니다. 이미지는 100x100이고 텍스트는이 높이를 초과합니다. 텍스트가 이미지 밑으로 감싸는 것이 아니라 오른쪽의 한 블록에 머물고 싶습니다. 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

당신은 단순히 인 flexbox하여이 작업을 수행 할 수 있습니다 (인터넷 탐색> 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/