如何将图像垂直对齐到浮动文本

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的。