div内文字和控件垂直居中

因为要动态生成页面所以就想用div来布局，因为对css不熟，弄了2个小时才搞明白（感觉还不如直接用Table）。其中最讨厌的就是Div内部的控件在垂直方向没法居中，其解决办法就是使用 padding-top与padding-bottom大小相等，并且padding-top + padding-buttom + height为实际Div高度。


<style type="text/css">


.layout




...{


margin:0px auto; //页面内居中


width: 1024px;


font-size: 10pt;


}


.half




...{


float: left; //为了让两个div并列放置


width: 49%; //如果是50%两个div就没法并列放在一行上，不知道有没有更好的解决方法


}


.single




...{


width: 98%;


}


.left




...{


background-color: #E8F5FE;


border: 1px solid #A9C9E2;


float: left;


height: 30px;


width: 175px;


text-align: right;


padding-right: 10px;


line-height: 30px; //与height大小相等，用于文字垂直居中


}


.right




...{


background-color: #E8F5FE;


border: 1px solid #A9C9E2;


padding-left: 10px;


background-color:White ;


height: 24px; //没有width属性，自适应宽度


padding-top: 3px;


padding-bottom: 3px;


line-height: 24px;


}使用代码：


<form id="form1" runat="server">


<div class="layout">


<div class="half">


<div class="left"><asp:Label ID="Label1" runat="server" Text="左边" Height="20px"></asp:Label></div>


<div class="right"></div>


</div>


<div class="half">


<div class="left"><asp:Label ID="Label2" runat="server" Text="右边"></asp:Label></div>


<div class="right"></div>


</div>


<div class="layout">


<div class="single"><div class="left">左边</div><div class="right"><asp:TextBox ID="TextBox3"


runat="server" Width="300px" ></asp:TextBox></div></div>


</div>


<div class="layout">


<div class="half"><div class="left">


</div><div class="right"></div></div>


<div class="half"><div class="right">代码含义</div></div>


</div>


</div>


</form>