Vertically centering inline elements in IE

[Neville310]

I am having some trouble vertically aligning an img tag (inline element) in a definition list. The challenge lies in IE (Firefox renders it as expected). The img element is within a floated <dd> tag. None of my hacks have resolved the situation. So I could use additional assistance to bring some insight in solving the problem. Let me know if you have suggestions about this objective.

http://neville.f2o.org/Template_TEMP3.html

[Buddy Bradley]

If you're using an IMG, you would be better off using "position: absolute; top: 50%; margin-top: -half img heightpx;".

If the image is purely decorative, use "background: url(image.gif) no-repeat 50% 0;".

[AutisticCuckoo]

You seem to be affected by the Peekaboo bug.

If you select the text in IE6, e.g. by pressing the mouse button in the upper left corner and dragging it downward and to the right, the missing headings mysteriously appear. There is no scroll bar, though, so the result is ... a bit odd.

I don't agree with Buddy Bradley here; there is no need for absolute positioning for this. You're on the right track with line-height and vertical-align.

[Paul O'B]

Hi,

You need to force ie into layout mode and that will correct the peek a boo bug as mentioned by Tommy above and also will allow the images to slide back into correct position:

div.Article {
background: #FFFFFF;
border: 1px solid #CCCCCC;
margin: 0 0 20px 0;
padding: 0 20px .5em 20px;
/*width: 220px;*/
}
/* mac hide \*/
* html div.Article {height:1%;}
/* end hide*/

That should solve the problems with any luck

[Neville310]

Thanks again Paul O'B. Your code suggestion did the trick. Thanks AutisticCuckoo for the links on the appropriate information.

If anybody was curious, the vertically image centering approach may be found at following link.
http://www.brunildo.org/test/img_center.html