如何对齐图像和标题

Question

我尝试了一些html和css，但我找不到css来对齐2个部分。这是问题的图像：

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

我申请什么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

从标题中删除边距：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

里面.section_title＆gt; h2：

height: 46px;
margin:0;

https://jsfiddle.net/o32h2rbh/1/

Answer 3

将margin:0提供给section_title > h2并根据需要更改其height。

Answer 4

大多数浏览器会将默认样式应用于不同的元素。例如，在Chrome中，h2附加了多个属性。

h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

推动你的h2下降的那个是：

-webkit-margin-before: 0.83em;

将其设置为0，它将被移回到顶部。