!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
title>腳本之家-css垂直居中/title>
script type="text/javascript" language="javascript">
function sel(id) {switch(id) {case "1":document.getElementById("sub").style.lineHeight = "normal";break;case "2":document.getElementById("sub").style.lineHeight = "20px";break;case "3":document.getElementById("sub").style.lineHeight = "28px";break;}}
/script>
style type="text/css">
#all {
  width:240px;
  padding:10px;
  font-size:12px;
  color:#FFF;
  background-color:#CCC;
}
#sub {
  width:230px;
  padding:0 5px;
  height:20px;
  overflow:hidden;
  background-color:#F90;
}
#sel {
  margin-top:5px;
}
select {
  width:260px;
}
/style>
/head>

body>
div id="all">
div id="sub">一行文字垂直居中，此對象高度為20px/div>
/div>
div id="sel">select onchange="sel(this.value)">option value="1">默認值，設置行高為：normal/option>option value="2">設置行高和對象高度相同：20px/option>option value="3">設置行高比對象的高度大：28px/option>/select>/div>
/body>
/html>