DIV内部垂直对齐，其中包含一个块级元素

Question

DIV内部垂直对齐，其中包含一个块级元素

4

这一直让我很疯狂，但从未找到正确答案。

我想实现以下效果： 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。

感谢任何帮助！

- Hugo

现在你的问题可以总结为 - 如何在IE7中进行垂直对齐？对于所有其他浏览器，您可以使用 display：table。对于IE7，请参照此指南。http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - mrtsherman

关于IE7支持的说明 - 微软已决定在2012年上半年不通过提示升级用户到IE8/9。根据你所处的地理位置（欧盟，美国），我预计到年中时IE7的支持率会下降至1％。因此，或许IE7并不像你想象的那么重要。IE7现在已经有五年的历史了！ - mrtsherman

是的，我并不真正支持它，但我的客户坚持要这样做，尽管我已经向他们展示了统计数据。 - Hugo

3个回答

3

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 元素之间的空格都会在呈现中显示。

编辑：您可以等效地在 #widgetWhite 上设置 font-size: 0，而不必担心空格。字体大小在子元素中继承，因此您需要在之后明确设置，如下所示：#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; }

Preview: http://jsfiddle.net/Wexcode/DcWB8/

- Wex

0

在垂直对齐生效之前，您必须首先为包装器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>

- Hoang Huynh

我很困惑为什么"display: inline-block"不起作用。我原以为可以这样做，然后使用IE7.0的"display: inline-block"hack来让它在IE7.0中工作。但是我的代码无论如何都不能正常工作。 - Hugo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mrtsherman · Accepted Answer

根据我提供的网站，我为您整理了一个解决方案。我没有将您现有的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;
}