vertalign-cases.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"			"http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Vertical alignment cases</title><style type="text/css">div.group {border-bottom: 1px solid black; padding-bottom: 1em; margin-bottom: 2em;}div.group div {border: 2px dotted gray; background: #EEE; margin: 0.5em; width: 300px;}a {border: 2px solid red;}img {height: 50px; width: 50px;}#case4 img, #case5 img, #case6 img {vertical-align: bottom;}#case7 img, #case8 img, #case9 img {vertical-align: top;}#case2, #case5, #case8 {text-align: center;}#case2 a, #case5 a, #case8 a {vertical-align: bottom;}#case3, #case6, #case9 {text-align: right;}#case3 a, #case6 a, #case9 a {vertical-align: top;}div#cases a {border-width: 0;}</style></head><body id="www-meyerweb-com" class="css"><div class="group" id="g1"><div id="case1">x<a href="test.html"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></a>x</div><div id="case2">x<a href="test.html"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></a>x</div><div id="case3">x<a href="test.html"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></a>x</div></div><div class="group" id="g2"><div id="case4">x<a href="test.html"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></a>x</div><div id="case5">x<a href="test.html"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></a>x</div><div id="case6">x<a href="test.html"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></a>x</div></div><div class="group" id="g3"><div id="case7">x<a href="test.html"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></a>x</div><div id="case8">x<a href="test.html"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></a>x</div><div id="case9">x<a href="test.html"><img src="http://www.meyerweb.com/eric/css/tests/i/tester.jpg"></a>x</div></div><div id="cases"><ul><li><a href="i/vertalign-ns621mac.gif">Netscape 6.2.1/Mac</a></li><li><a href="i/vertalign-ie51mac.gif">Explorer 5.1/Mac</a></li><li><a href="i/vertalign-rijk.jpg">Opera 6.01, MSIE 6, Mozilla0.9.7 (Win98SE)</a> (contributed by Rijk van Geijtenbeek)</li></ul></div></body></html>