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 >