vertical-align of tall images

In each of the following rows there are 7 boxes, containg text and an image with different vertical-align values: baseline, top, text-top, bottom, text-bottom, middle. The last box contains just text. Change font size to test with different heights of the boxes.

	baseline	top	text-top	bottom	text-bottom	middle	just text
line-height: normal	x pÈ	x pÈ	x pÈ	x pÈ	x pÈ	x pÈ	x pÈ
line-height: 2	x pÈ	x pÈ	x pÈ	x pÈ	x pÈ	x pÈ	x pÈ
line-height: 0.5	x pÈ	x pÈ	x pÈ	x pÈ	x pÈ	x pÈ	x pÈ

Notes:

• Differences among browsers, especially with bottom: Gecko, Safari, IE8 versus Opera.
• IE7-/Win ignores line-height

Related tests:

• vertical-align, images and line-height,
• an image in a box,
• an image in a box with different line heights,
• IE7-/Win line-height problem with inline images.
• IE7-/Win images with vertical-align middle sometimes positioned 1px too low.

CSS tests home