html - 文字和图片不对齐

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/