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>