如何使图像与浮动文本垂直对齐

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;
}

演示

任何人都可以帮助解决此问题。 提前致谢。

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

您必须使用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 display：inline-block而不是放置.row {font-size: 0 }和打破字体大小规则。

Answer 4

您可以执行以下操作：

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

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

小提琴