I'm trying to get a responsive sized image and a h2 header align in the middle (vertically), but I'm lost. It is a header at the top of the page.

The image is a image of approx. 100 by 100 pixels (but can vary depending in the used image), but needs to be resized to a max of 15% of the page-containers width when the window is smaller (tablet, phones).

Because the height of the image will be larger than the height of the header, I'd like to vertically align the h2 with the image. When the window get smaller, the image will size down. The h2 should align in the center, even when the height of the h2 is larger than the image (very large title)

This is my HTML (this is for the new message page, but I will use it on various pages)

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

```

This is the CSS for it:

```
.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: " ";
}

```

I've already tried to use display: table for the parent DIV and display: table-cell for the img and the h2 (and removed the float on the image). 
Unfortunately when using table-cell, the max-width option won't function anymore on the image, because the image will resize to 15% of the table-cell, instead of 15% of the table.

Does anyone know how to do this will css?

Thanks, Barry