html - DIV 内垂直对齐，div 内有 block 元素

Question

这一直让我发疯，从来没有找到正确的答案。

我想实现以下目标: http://juicybyte.com/stack-overflow.jpg

意思是，我想在左侧的 div 上放置一个图像，并根据内容的多少自动垂直对齐文本。文本 div 的高度可以固定。

然而，一切都不顺利。

<div id="widgetWhite">
<div id="widgetWhiteIcon">
    <a href="#" title="White"><img src="/images/iconWhiteIconTn.png" alt="White Icon" /></a>
</div>
<div id="widgetWhiteContent">
    <p>I would love it if this worked.</p>
    <a href="#">Download PDF</a> 
</div>
</div>

CSS:

#widgetWhiteIcon {
width: 82px;
margin: 0 10px 0 20px;
display: inline-block;
vertical-align: middle;
}

#widgetWhiteContent {
width: 108px;
font: normal normal 11px/14px Arial, sans-serif; 
height: 110px; 
display: inline-block;
vertical-align: middle;
}

#widgetWhiteContent a {
color: #f37032;
}

不太关心 IE6.0，但不幸的是需要 IE7.0。

感谢您的帮助!

Answer 1

在这里，我根据我链接的网站为您整理了一个解决方案。我没有费心将您现有的 CSS 映射到其中，但我想您会明白的。

http://jsfiddle.net/M3h6v/5/

<div class="ie7vert1">
    <a href="#" title="White"><img src="http://placehold.it/120x150" alt="White Icon" /></a>            
    <div class="ie7vert2">
        <div class="ie7vert3">         
            <p>I would love it if this worked.</p>
            <a href="#">Download PDF</a> 
            <br style="clear: both;" />
        </div>
    </div>
</div>

.ie7vert1 {
    display: table; 
    #position: relative; 
    overflow: hidden;
    border: 1px dashed gray;
    float: left;
    width: 100%;
}

.ie7vert2 {
    #position: absolute; 
    #top: 50%;
    display: table-cell; 
    vertical-align: middle;
}

.ie7vert3 {
    #position: relative; 
    #top: -50%;
    border: 1px dashed red;
}