Fatal编程技术网
  • asp.net/
  • Asp.net 中心ASP母版页

Asp.net 中心ASP母版页

asp.net css

Asp.net 中心ASP母版页,asp.net,css,positioning,Asp.net,Css,Positioning,首先让我说这是我做的第一个ASP.NET项目。我尝试过使用中间标记，将所有内容都封装在一个div中，并将其设置为中间，而表格标记使用自动边距，但没有任何效果。有人能给我指一下正确的方向吗 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Server.SiteMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

首先让我说这是我做的第一个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>
目前我有
，但它似乎不起作用。

首先，您在
div
上用
class=“page”
属性设置了绝对定位。删除此选项，因为它将始终将div定位在
top:10px；左：160px

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

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

如果您申报div：

<div id="PageContainer">


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

堆栈溢出使用更现代的方法-这是您尝试过的方法，但关键是您需要定义宽度。通过检查CSS的StackOverflow（使用IE developer工具栏或firebug或类似工具），如果我们查看CSS中的header
div
标记，我们会看到：

#header{
    width:    960px;
    height:   120px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
i、 e.设置
宽度
，然后将
左边距
和
右边距
设置为
自动
就足够了。

内容是否确实左对齐？或者它只是填满了整个屏幕的宽度？它不动。比如，如果你使用这个StAcExver页面并把它放在监视器上，它就在浏览器的中间。我的页面仍然在浏览器的左侧。非常糟糕的代码。首先要去掉所有的内联样式。然后它会更容易阅读，你也会更容易发现问题。永远不要使用表格进行网页设计！！！这与C#无关，也与asp.net无关！这只是css和html。我同意；但最好至少用asp.net标记它，这样其他搜索asp.net母版页的人都能找到它。也；桌子很好。只是不是为了定位！我知道这不是一个很好的代码，但我现在只是想让它工作起来，然后我会回去清理所有的东西；JSFIDLE也是一个非常棒的网站，可以尝试一些东西——如果你可以创建一些基本的HTML来做你想做的事情，那么大部分时间你几乎都能做到。除非是IE6；-） 
#header{
    width:    960px;
    height:   120px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}