Vertical alignment inside a div, with a block element inside a div

Question

It always drove me crazy and didn't find the right answer.

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

Meaning, I want to have an image on the div on the left, and text that nicely aligns vertically depending on the amount of content. The height of the text div can be fixed.

However, everything does not 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> 

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

On IE6.0 anyway, but IE7.0 is required, unfortunately.

Thanks for any help!

Answer 1

Here I put together a solution for you based on the site associated with it. I did not bind existing css to it, but I think you will get this 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 items you are trying to vertically align must be siblings.
• The elements you are trying to align vertically should not be block level elements.

This, as they say, 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 division for #widgetWhiteContent relate to: </div><div id="widgetWhiteContent"> . This allows you to control the distance between these two elements, since usually any space between inline elements in your layout is displayed in the presentation.

Edit: You can equally set font-size: 0 to #widgetWhite without worrying about the space. font-size inherited in child elements, so you will need to explicitly set this after, for example: #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 must first set a fixed height for the div wrapper (div # widgetWhiteContent) to work with vertical alignment. To save everything in a div # widgetWhiteContent div vertically aligned with div # widgetWhiteIcon, both divs must be at the same height.

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

Your CSS is as follows

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