效果图示：
实现代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
<!--
.titlebar_left {
background: url(img/left.gif) no-repeat left center;
width: 25px;
height: 29px;
float:left;
}
.titlebar_center {
background: url(img/center.gif) repeat-x;
width: 200;
height: 29px;
float:left;
line-height: 29px;
font-family:隶书;
font-size:18pt;
}
.titlebar_right {
background: url(img/right.gif) no-repeat right center;
width: 192px;
height: 29px;
float:left;
}
-->
</style>
</HEAD>
<BODY>
<div>
<div class="titlebar_left"></div>
<div class="titlebar_center">蓝色缎带示例</div>
<div class="titlebar_right"></div>
</div>
</BODY>
</HTML>
说明：
1.指定div的行高等于div的高度能有效控制文字垂直居中，这种方法大家要牢记。
2.如果是标题栏是活动的，可以使用一行三列的表格实现之。
代码下载：
http://www.blogjava.net/Files/heyang/sample_Duandai20090815090528.rar