無論內容大小如何，兩個並排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; 
}