Question

首先请允许我说这是我完成的第一个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;">，但它似乎无效。

Answer 1

首先，您在具有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中的任何内容居中。使用这种技术时，定义宽度然后将边距设置为宽度的一半是关键。

See a live example here.

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;
}

即。设置width，然后将margin-left和margin-right设置为auto即可。

中心ASP主页

1 个答案: