【示例1】下面示例演示如何定义块元素垂直对齐显示。vertical-align属性不支持块状元素对齐，只有当包含框显示为单元格时才有效。
启动Dreamweaver，新建一个网页，保存为test1.html，在<body>标签内输入如下结构：
<div id="box"> <div id="sub_box"></div> </div>
在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。然后定义如下两个样式，定义外面盒子为单元格显示，且垂直居中。
#box {/* 布局包含框 */
display:table-cell; /* 单元格显示 */
vertical-align:middle; /* 垂直居中 */
width:300px; /* 固定宽度 */
height:200px; /* 固定高度 */
border:solid 1px red; /* 红色边框线 */}
#sub_box {/* 子包含框 */
width:100px; /* 固定宽度 */
height:50px; /* 固定高度 */
background:blue; /* 蓝色背景 */}
在浏览器中预览测试，则在标准浏览器中显示效果如图1所示。但是在IE 7及其以下版本浏览器不支持这种方法，如图2所示。
图3 IE 10中的解析效果
图4 IE 7中的解析效果
不过IE支持在表格中定义垂直居中，因此针对上面示例的结构，进行如下修改，把内部盒子放在单元格中，这样就可以实现在IE 7及其以下版本浏览器垂直对齐效果。
<table> <tr> <td id="box"><div id="sub_box"></div></td> </tr> </table>
这种方法在实际应用时不是很方便，建议用户尝试使用其他方法。
【示例2】下面示例演示了不同垂直对齐方式的比较效果。vertical-align属性提供的值很多，但是IE浏览器与其他浏览器对于解析它们的效果却存在很大的分歧。一般情况下，不建议广泛使用这些属性值，实践中主要用到vertical-align属性的垂直居中样式，偶尔也会用到上标和下标效果。为了方便用户比较这些取值效果，请上机练习下面这个示例。
新建一个网页，保存为test3.html，在<body>标签内输入如下结构：
<p>valign: <span class="baseline"><img src="images/box.gif" title="baseline" /></span> <span class="sub"><img src="images/box.gif" title="sub" /></span> <span class="super"><img src="images/box.gif" title="super" /></span> <span class="top"><img src="images/box.gif" title="top" /></span> <span class="text-top"><img src="images/box.gif" title="text-top" /></span> <span class="middle"><img src="images/box.gif" title="middle" /></span> <span class="bottom"><img src="images/box.gif" title="bottom" /></span> <span class="text-bottom"><img src="images/box.gif" title="text-bottom" /></span> </p>
在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。然后定义如下类样式，
body {font-size:48px;}
.baseline {vertical-align:baseline;}
.sub {vertical-align:sub;}
.super {vertical-align:super;}
.top {vertical-align:top;}
.text-top {vertical-align:text-top;}
.middle {vertical-align:middle;}
.bottom {vertical-align:bottom;}
在浏览器中预览测试，则显示效果如图10.3所示。用户可以通过这个效果图直观的比较这些取值的效果。
图3 垂直对齐取值效果比较