0

首先让我说这是我完成的第一个 ASP.NET 项目。我尝试使用中心标签，将所有内容包含在 div 中并将其设置为居中，以及带有自动边距的表格标签，但没有任何效果。有人可以在这里指出我正确的方向吗？

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Server.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head runat="server">
        <title></title>
        <link
            href="~/Styles/Site.css"
            rel="stylesheet"
            type="text/css"
        />
        <asp:ContentPlaceHolder
            ID="HeadContent"
            runat="server">
        </asp:ContentPlaceHolder>
    </head>

<body>
    <table style="margin-right: auto; margin-left: auto;">
        <form id ="form1" runat ="server">
            <div class="page" 
                style="background-color: #000000; position: absolute; top: 10px; left: 160px; width: 1000px; height: 100px;">

                    <asp:Image ID="Image1" runat="server" ImageUrl="~/Resources/image.png"
                        style="z-index: 1; left: 9px; top: 7px; position: absolute; height: 76px; width: 204px" />

                    <asp:Button ID="Button4" runat="server" BackColor="#333333" ForeColor="White" Height="23px" onclick="Button4_Click"
                        style="z-index: 1; left: 931px; top: 65px; position: absolute" Text="Login" Width="60px" />

                    <asp:Label ID="Label1" runat="server" Font-Underline="True" ForeColor="White"
                        style="z-index: 1; left: 727px; top: 67px; position: absolute; width: 193px; text-align: right">
                    </asp:Label>
            </div>

            <div 
                style="z-index: 1; left: 192px; top: 165px; position: absolute; height: 445px; width: 938px; color: #000000; background-color: #FFFFFF;">

                    <asp:ContentPlaceHolder
                        ID="MainContent"
                        runat="server">
                    </asp:ContentPlaceHolder>
            </div>

            <asp:Panel ID="Panel1" runat="server" BackColor="#003366"
                style="z-index: 1; left: 160px; top: 128px; position: absolute; height: 36px; width: 1002px">

                <asp:Button ID="Button5" runat="server" BackColor="#336699" BorderStyle="None" Height="23px" onclick="Button5_Click"
                    style="z-index: 1; left: 220px; top: 7px; position: absolute; height: 23px; width: 60px;" Text="Users" Width="60px" />

                <asp:Button ID="Button1" runat="server" BackColor="#336699"
                    style="z-index: 1; left: 10px; top: 7px; position: absolute; height: 23px; width: 60px;" Text="Home" BorderStyle="None" onclick="Button1_Click"/>

                <asp:Button ID="Button2" runat="server" BackColor="#336699"
                    style="z-index: 1; left: 80px; top: 7px; position: absolute; height: 23px; width: 60px" Text="About" BorderStyle="None" onclick="Button2_Click" />

                <asp:Button ID="Button3" runat="server" BackColor="#336699" BorderStyle="None" 
                    style="z-index: 1; left: 150px; top: 7px; position: absolute" Text="Profile" Height="23px" onclick="Button3_Click" Width="60px" />

                <asp:Button ID="Button6" runat="server" BackColor="#336699" BorderStyle="None" 
                    style="z-index: 1; left: 290px; top: 7px; position: absolute" Text="Servers" Height="23px" onclick="Button6_Click" Width="60px" />
            </asp:Panel>
        </form>
        <div style="z-index: 1; left: 160px; top: 165px; position: absolute; height: 445px; width: 32px; background-color: #FFFFFF;">
        </div>

        <div style="z-index: 1; left: 1130px; top: 165px; position: absolute; height: 445px; width: 32px; background-color: #FFFFFF;">
        </div>
    </table>
</body>
</html>

目前我有，<table style="margin-right: auto; margin-left: auto;">但它似乎不起作用。

4

1 回答 1

2

首先，您div在class="page"属性上设置了绝对定位。删除它，因为它总是将您的 div 定位在top:10px; left:160px;

事实上，你有很多绝对定位——你并不真正需要它，应该摆脱它。您是否使用 Visual Studio 或类似工具来设计此页面？有些工具会不时添加这些额外的 CSS。

当我想实现居中时，我通常使用具有定义宽度的 DIV；然后我可以使用 left 属性和边距来模拟居中对齐的内容。这也往往适用于各种浏览器，尤其是旧版本的 Internet Explorer。

如果你声明一个 div：

<div id="PageContainer">


</div>

然后使用以下 CSS：

#PageContainer{
    position:               absolute;
    float:                  left;
    left:                   50%; 
    top:                    20x;
    width:                  500px;
    margin:                 0px 0px 0px -250px; /* half of the width */
    background-color:       red;
}

然后它将在 div 中居中任何内容。定义宽度，然后将边距设置为宽度的一半是使用此技术时的关键。

在这里查看一个活生生的例子。

Stack Overflow 使用一种更现代的方法 - 这是您尝试过的方法，但关键是您需要定义宽度。通过检查 StackOverflow 的 CSS（使用 IE 开发人员工具栏或 firebug 或类似工具），如果我们查看标题div标签的 CSS，我们会看到：

#header{
    width:    960px;
    height:   120px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

即设置 awidth然后设置margin-leftand margin-righttoauto应该足够了。

于 2012-04-14T21:16:35.240 回答