div内文字和控件垂直居中

本文介绍了一种使用CSS进行网页布局的方法,特别是如何使div内部元素在垂直方向上居中。通过设置padding-top和padding-bottom实现垂直居中效果,并分享了一个具体的案例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    因为要动态生成页面所以就想用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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值