在 DIV 内垂直对齐，在 div 内有一个块元素

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;
}

Answer 2

vertical-align 属性有两个使用前提：

• 您尝试垂直对齐的元素必须是同级元素。
• 您尝试垂直对齐的元素不能是块级元素。

话虽如此，这其实很容易解决：

<div id="widgetWhite">
    <div id="widgetWhiteIcon">
        <a href="#" title="White"><img src="http://placehold.it/100x100" alt="White Icon" /></a>
    </div><div id="widgetWhiteContent">
        <p>I would love it if this worked.</p>
        <a href="#">Download PDF</a> 
    </div>
</div>

请注意，#widgetWhiteIcon 的结束 div 和 #widgetWhiteContent 的开始 div 是接触的：</div><div id="widgetWhiteContent">。这允许您控制这两个元素之间的间距，因为通常在您的标记中 inline 元素之间的任何空间都会显示在演示文稿中。

编辑：您可以等效地将font-size: 0 设置在#widgetWhite 上，而不必担心空格。 font-size 在子元素中继承，因此您需要在之后显式设置它，如下所示：#widgetWhite { font-size: 0; } #widgetWhite * { font-size: 12px; }

CSS：

p { margin: 0; }
#widgetWhite > div { 
    vertical-align: middle;
    display: inline-block; }
#widgetWhiteContent { margin: 0 0 0 4px; }
#widgetWhiteContent a { 
    margin: 1em 0 0;
    display: block; }

预览：http://jsfiddle.net/Wexcode/DcWB8/

Answer 3

您必须首先为包装 div (div#widgetWhiteContent) 设置一个固定高度，以便垂直对齐工作。为了使 div#widgetWhiteContent 中的所有内容与 div#widgetWhiteIcon 垂直对齐，两个 div 的高度应该相同。

所以一个好的解决方案是为外部 div 设置一个高度，然后将两个子 div 的高度设置为 100%。

你的 CSS 是这样的

<style>
    #widgetWhite {
        height: 110px;
    }

    #widgetWhiteIcon {
        width: 82px;
        margin: 0 10px 0 20px;
        display: inline-block;
        height: 100%;
    }

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

    #widgetWhiteContent a {
        color: #f37032;
    }
</style>