如何將圖像垂直對齊到浮動文本

Question

我正在開發一個兩列響應佈局。一列有圖像，另一列有文字。我想對齊圖像vertical:middle;，我嘗試了幾個技巧和stackoverflow的答案，直到我能夠實現它。這裏是我的代碼如下

HTML

<div class="row"> 
    <div class="col"> 
     <img src="http://placekitten.com/g/200/300"> 
    </div> 
    <div class="col"> 
     <h2>Quicker answers to your customer’s questions.</h2> 
     <p>Potential customers visit your site to learn more about what you do and how it can help them. When they have a question, our web chat tool gives them a direct line to your customer support and expert knowled</p> 
    </div> 
</div> 

風格

h2{ 
    margin:0; 
} 
.col{ 
    float:left; 
    width: 50%; 
    vertical-align: middle; 
} 

DEMO

任何一個可以幫助解決這個問題。提前致謝。

Answer 1

你可以嘗試display: inline-block;

h2 { 
    margin:0; 
} 

.col { 
    display: inline-block; 
    width: 50%; 
    vertical-align: middle; 
    font-size: 13px; 
} 

.row { 
    font-size: 0; // remove space between inline-block elements 
} 

一個例子：http://jsfiddle.net/y208tfc0/1/

Answer 2

您可以顯示該行的表和col爲表單元格？

css;

.row { 
     display: table; 
    } 
    .col { 
     display: table-cell; 
     vertical-align: middle; 
    } 

Answer 3

你可以做到以下幾點：

h2{ 
    margin:0; 
} 
.col{ 
    width: 50%; 
    vertical-align: middle; 
    display: table-cell;/*Add display table-cell*/ 
} 

.row{ 
    display: table;/*Add display table*/ 
} 

fiddle

Answer 4

你必須使用display: inline-block;財產。

現場演示有：http://jsfiddle.net/y208tfc0/5/

h2{ 
    margin:0; 
} 
.row { 
    display: inline-block; 
} 
.col{ 
    box-sizing: border-box; 
    width: 45%; 
    vertical-align: middle; 
    display: inline-block; 
} 

而不是把.row {font-size: 0 }，打破字體大小規則的，我選擇把.row顯示：inline-block的。