现在的位置: 首页 > 综合 > 正文

div内文字和控件垂直居中

2013年09月19日 ⁄ 综合 ⁄ 共 1942字 ⁄ 字号 评论关闭
    因为要动态生成页面所以就想用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>

抱歉!评论已关闭.