如何垂直对齐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;