如何垂直對齊DIV與圖像

Question

我有一個問題，我注意到是非常受歡迎的。儘管所有例子都沒有找到適合我的解決方案。

這裏是我有http://jsfiddle.net/yeLqN/

<div id="logo"> 
      <img src="images/logo.png"> 
      <div id="hot"> 
       <h1>test</h1> 
       <h3>Test</h3> 

      </div> 
     </div> 

這裏是真人版與圖像http://minecraft-adventure.com/test/ 所以我想要做的就是中心的熱格與IMG。

Answer 1

爲了使圖像中心僅將image設置爲block level元素。這裏是修改後的CSS。

#logo img{display:block; vertical-align:top;} 

這是演示。 http://jsfiddle.net/kheema/yeLqN/7/

Answer 2

看到你只想用圖像居中，您可以使用邊距來實現這一

Answer 3

使用圖片作爲CSS背景和設置位置中心：

background: url('images/logo.png') center center no-repeat; 
display: block; 
height: 150px; 
width: 200px; 
float: left; 

See fiddle

或 只需設置爲img的對齊方式，特別是在知道線條高度的情況下更容易：

height: 50px; 
margin: 50px 20px 50px 20px;