无论内容大小如何，两个并排div的垂直中心内容

Question

我试图找出一种方法，当左侧有图像时，将两个并排div的内容垂直居中，右边的文字。唯一的问题是，即使段落长度改变，它也必须工作。有没有办法确保每个“部分”中的图像/段落总是垂直居中，而不管图像高度是大于还是小于段落文本高度？

HTML：

<div class="section"> 
    <div class="paragraph"> 
    <img src="http://placehold.it/350x150" /> 
    <p> 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
    </p> 
    </div> 
</div> 
<div class="section"> 
    <div class="paragraph"> 
    <img src="http://placehold.it/350x150" /> 
    <p> 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
     Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
    </p> 
    </div> 
</div> 

CSS：

.section { 
    padding: 1% 0; 
    clear: both; 
    display: block; 
    overflow: hidden; 
} 
img { 
    width: 25%; 
} 
p { 
    margin: 0; 
    width: 50%; 
} 
img, p { 
    float: left; 
    padding: 2% 1%; 
} 

我的jsfiddle：https://jsfiddle.net/fLgsrqqm/

Answer 1

只要改变这个规则：（无浮动，垂直对齐：中间）

img, p { 
    display: inline-block; 
    padding: 2% 1%; 
    vertical-align: middle; 
} 

https://jsfiddle.net/3wt1t8zx/

Answer 2

您是否尝试过使用CSS3 Flexbox的进行布局： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

也看看： http://caniuse.com/#search=flexbox

Answer 3

添加下面的代码，看看它的工作原理：

.paragraph { 
    display:flex; 
    align-items:center; 
}