Question

我正在学习如何将div集中在div中的教程。它使用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;
}

Demo on JSFiddle

在div中居中img，vertical-align：middle

2 个答案: