文字和图像没有排队

Question

我无法将我的文字和图片排成一行。我有一个名为'contactbar'的容器，然后文本是h1，图像就在html中。请帮忙......我已经尝试过一切！ CSS：

#contactbar {
  background-color: #2E2B1F;
  width: 203px;
  height: 35px;
  position: absolute;
  top: 19px;
  left: 0px;
}

h1 {
  color: #9A8478;
  font-size: 16px;
  display: inline;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  height: 56px;
  vertical-align: middle;
  line-height: 1.4em;
}

这是html：

<div id= "contactbar">
  <h1>CONTACT</h1>
  <img src="images/contactarrow.png" vertical-align="middle" width="21" height="35"    
vertical-align="middle" alt="linkedin"/>
</div>

以下是我正在寻找的图像：http://www.flickr.com/photos/77703125@N07/8331407232/in/photostream

我也尝试过绝对定位，但是在所有浏览器中都不一样......所以我想避开它。任何帮助，将不胜感激。谢谢！

Answer 1

将图片和标题设置为vertical-align值middle对我来说足够了：

h1 {
    display: inline;
    vertical-align: middle;
}

img {
    vertical-align: middle;
}

其中，有一些额外的（非关键）样式，如下所示：

小提琴：http://jsfiddle.net/pqggQ/5/