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

Question

This has always driven me crazy and never found the right answer.

I want to achieve the following: http://juicybyte.com/stack-overflow.jpg

Meaning, I want to have an image on a div on the left, and text that nicely vertical-aligns itself depending on how much content there is. Height of the text div can be fixed.

However, everything is no go.

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

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

Don't really care about IE6.0, but IE7.0 is required unfortunately.

Thanks for any help!

Answer 1

Here, I put together a solution for you based on the site I linked. I didn't bother mapping your existing css into it, but I think you will get the idea.

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

The vertical-align property has two prerequisites for use:

• The elements you are trying to vertically-align must be siblings.
• The elements you are trying to vertically-align must not be block-level elements.

That being said, this is actually quite easy to solve:

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

Note that the closing div for #widgetWhiteIcon and the opening div for #widgetWhiteContent are touching: </div><div id="widgetWhiteContent"> . This allows for you to control the spacing between these two elements, since normally any space between inline elements in your markup is shown in the presentation.

Edit: You could equivalently set font-size: 0 on #widgetWhite without worrying about whitespace. font-size is inherited in the children elements, so you would need to explicitly set that after, like so: #widgetWhite { font-size: 0; } #widgetWhite * { font-size: 12px; } #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/

Answer 3

You have to set a fixed height for the wrapper div (div#widgetWhiteContent) first in order for vertical-align to work. To keep everything in div#widgetWhiteContent vertically aligned with div#widgetWhiteIcon, both div's should be at the same height.

So a good solution would be to set a height for the outer div, and then set the height of both child div's to 100%.

Your CSS goes like this

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