html - 如何对齐图像和标题

Question

我正在尝试一些 html 和 css，但找不到要对齐 2 个部分的 css。这是问题的图片:

我希望图片和文章水平对齐且高度相同。

我应用什么CSS？这是我的 html:

<article class="section_title">
    <img src="http://i.imgur.com/EY9qUVf.png" width="50" height="50" />
    <h2>Inleiding</h2>
</article>

到目前为止我的 CSS:

.section_title {
    display: inline-block;
    position: relative;
}

.section_title > img {
    float: left;
}

.section_title > h2{
    background-color: #232935;
    vertical-align: top;
    float: right;
    left: 50px;
    color: white;
    height: 50px;
    padding: 2px;
}

在 jsfiddle 中:https://jsfiddle.net/yxtkrzmh/

Answer 1

去除标题的边距:

.section_title {
  display: inline-block;
  position: relative;
}
.section_title > h2 {
  margin: 0;
  padding: 12px 10px 0;
  background-color: #232935;
  float: right;
  left: 50px;
  color: white;
  height: 38px;
}

<article class="section_title">
  <img src="http://i.imgur.com/EY9qUVf.png" width="50" height="50" />
  <h2>Inleiding</h2>
</article>