3

テキストと画像を同じ行に並べることができません。'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

私は絶対測位も試しましたが、これは機能しますが、すべてのブラウザで同じではありません...それで、それを避けたいと思います。どんな助けでもいただければ幸いです。ありがとう！

4

1 に答える 1

5

画像と見出しのvertical-align値をに設定するだけで、私にmiddleは十分に思えました。

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

img {
    vertical-align: middle;
}

少し追加の（重要ではない）スタイルを使用すると、次のようになります。

ここに画像の説明を入力

フィドル: http://jsfiddle.net/pqggQ/5/

于 2012-12-31T20:55:06.400 に答える