image - 响应式图像中间与 h2 标题对齐

Question

我试图获得一个响应大小的图像和一个在中间(垂直)对齐的 h2 标题，但我迷路了。它是页面顶部的标题。

图像是大约的图像。 100 x 100 像素(但可能因使用的图像而异)，但当窗口较小时(平板电脑、手机)，需要将大小调整为最大页面容器宽度的 15%。

因为图片的高度会大于header的高度，所以我想将h2与图片垂直对齐。当窗口变小时，图像会变小。 h2 应该居中对齐，即使 h2 的高度大于图像(非常大的标题)

这是我的 HTML(这是用于新消息页面，但我会在各种页面上使用它)

<div class="header_image clearfix">
    <img src="message_new.png" />
    <h2>Write new message</h2>
</div>

这是它的 CSS:

.header_image {
  position: relative;
}
.header_image img {
  max-width: 15%;
  float: left;
}
.header_image h2 {
  vertical-align: middle;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

我已经尝试过对父 DIV 使用 display: table，对 img 和 h2 使用 display: table-cell(并删除了图像上的 float )。不幸的是，当使用表格单元格时，最大宽度选项将不再对图像起作用，因为图像将调整为表格单元格的 15%，而不是表格的 15%。

有人知道如何使用 css 吗？

谢谢，巴里

Answer 1

尝试使用 display:inline-block 而不是 float

JSfiddle

CSS

.header_image {
    position: relative;
}
.header_image img {
    max-width: 15%;
    display: inline-block;
    vertical-align: middle;
}
.header_image h2 {
    display: inline-block;
    vertical-align: middle;
    max-width:80%; /* in case of longer text */
}