效果圖示：
實現代碼：
<!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.aygfsteel.com/Files/heyang/sample_Duandai20090815090528.rar