如何将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/的实时版 所以我想做的是将热门div与img中心。

Answer 1

看到您只想将其与图像居中，您可以使用margin-top来实现此目的

Answer 2

将图像用作css背景并将位置设置为居中：

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

See fiddle

OR 只需设置img的对齐方式，特别是如果你知道线的高度，那将会很容易：

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

Answer 3

要使图像中心只需将image作为block level元素。这是修改过的CSS。

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

这是Demo。 http://jsfiddle.net/kheema/yeLqN/7/