div水平垂直居中

css样式：

插播一下 让checkbox字体和框在同一条水平线上的样式
.checkbox
{
    vertical-align: middle;
    margin-top: 0;
    line-height: 24px;
    margin-bottom: 2px;
}

/*div水平垂直居中*/
.topdiv
{
    text-align:center;
    }
.insidediv1
{
    position:absolute; 
    left:50%; top:50%; 
    margin-left:width/2; 
    margin-top:height/2;
    }
.insidediv2
{ 
    background-color:Yellow; 
    width:300px; 
    height:180px; 
    margin-left:-150px; /*对应数值是width的二分之一*/
    margin-top:-90px; /*对应数值是height的二分之一*/
    }

 aspx或html页面：

<body>
    <form id="form1" runat="server">
    <div class="topdiv">
        <div class="insidediv1">
            <div class="insidediv2">
                <table cellpadding="0" cellspacing="0" class="table">
                    <tr>
                        <td>
                            登 录 名：
                        </td>
                        <td align="left">
                            <asp:TextBox ID="txtLoginName" runat="server" Width="150px" Height="26px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
                        </td>
                        <td align="left">
                            <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="150px" Height="26px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="btnLogin" runat="server" Text="登录" OnClick="btnLogin_Click" />
                        </td>
                        <td>
                            <asp:Button ID="btnReset" runat="server" Text="重置" OnClick="btnReset_Click" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    </form>
</body>

 

posted @ 2012-12-10 11:10  暗香残留  阅读(218)  评论(0)  编辑  收藏  举报