td或div 中同时有文字和按钮、输入框垂直居中

来源：互联网发布：詹姆斯巅峰数据编辑：程序博客网时间：2024/05/22 03:28

http://www.cnblogs.com/Denny_Yang/archive/2011/10/13/2209774.html

关键，文字要包含在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>

td或div 中同时有文字和按钮、输入框 垂直居中

td或div 中同时有文字和按钮、输入框垂直居中