天天看點

中文字,文本框,button按鈕垂直居中對齊方法

關鍵,文字要包含在label标簽中,并設定行高,否則文字會與文本框的頂端對齊。文本框要設定vertical-align:middle;否則文本框與button頂端對齊。button中文字垂直居中,要設定高和行高,行高要小于高。

<html>
<head>
<style type='text/css'>
LABEL
{
LINE-HEIGHT: 20px;
HEIGHT: 20px
}
.button
{
font-size:12px;
  text-align:center;
padding:0px;
vertical-align:middle ;
line-height:22px;
margin:0px; 
Height:26px;
Width:60px;
}
.txt
{
border:1px #6699CC solid;
height:20px;
width:160px;
margin:0px;
vertical-align:middle; 
font-size:12px;
padding:0px 2px;
line-height :16px;
}
</style>
</head>
<body>
div中文字,文本框,button按鈕垂直居中對齊方法及的css樣式。
<div class="divPad" style="FONT-SIZE: 12px; HEIGHT: 28px;">
<label>查詢:企業名稱</label><input ID="txt_company" type="text" class="txt" />    
<label>姓名</label><input ID="txt_name" class="txt" Width="80px" type="text"/> 
<input type="button" ID="Button1" value="查找" class="button" /></div>
</body>
</html>