どのようなサイズのコンテンツであっても、2つのサイドバイサイドdivの垂直方向の中心コンテンツ

Question

左側の画像がある場合は、2つのside-by-side 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フレキシボックスを使用してみました： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

をも見ています http://caniuse.com/#search=flexbox

Answer 3

は、コードの下に追加して、それが動作するかどうかを確認：

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