css - 在 div 中居中 img，vertical-align: middle

Question

我正在学习如何在 div 中居中 img 的教程。它使用 line-high 和 vertical-align: middle。例如，这是小提琴中的代码：

<div id="ad_unit">
    <div class="logo">
        <img src="http://i760.photobucket.com/albums/xx243/jhonmarcanob2010/50x50.jpg" alt="image"/>
    </div>      
</div>


.logo {
    background-color: green;
    position: absolute;
    width: 138px;
    height: 300px;
    line-height: 300px;
    text-align: center;
}

.logo img {
    vertical-align: middle;
}

但是当我尝试将代码放入 html 文件时，图像不是垂直居中的。有什么想法吗？

Answer 1

HTML

<div id="ad_unit">
    <div class="logo">
        <img src="http://i760.photobucket.com/albums/xx243/jhonmarcanob2010/50x50.jpg" alt="image" />
    </div>
</div>

CSS

.logo {
    background-color: #ccc;
    height: 300px;
    line-height: 300px;
}
.logo img {
    vertical-align: middle;
}

示例：http: //jsfiddle.net/justincook/yarzY/

Answer 2

也许这个小技巧会对你有所帮助。我为此使用了内联阻塞 div：

试试这个 HTML 代码：

<div id="ad_unit">
<div class="logo">
    <img src="http://i760.photobucket.com/albums/xx243/jhonmarcanob2010/50x50.jpg" alt="image"/>
    <div class="vcenter"></div>
</div>      

和 CSS

.logo {
    background-color: green;
    text-align: center;
    height: 300px;
}

.logo img {
    vertical-align: middle;
}

.logo .vcenter {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

JSFiddle 上的演示