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

您必须使用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*/
}

fiddle

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

4 个答案: