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）设置固定高度才能使vertical-align工作。为了使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>

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

3 个答案: