C# 使ASP：菜单在页面中间居中_C#_Asp.net_Css_Menu_Centering

C# 使ASP：菜单在页面中间居中

c# asp.net css menu

C# 使ASP：菜单在页面中间居中,c#,asp.net,css,menu,centering,C#,Asp.net,Css,Menu,Centering,我很难找到与asp:Menu控件和页面居中相关的问题的解决方案。我真的很惊讶，我在谷歌上搜索的所有解决方案不是使用asp:Menu控件，就是只使用列表或表格我知道margin:0auto`并且添加一个宽度是有效的，但是当我把它放在菜单控件中时，我无法让它工作这是我的主页： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">

我很难找到与

asp:Menu

控件和页面居中相关的问题的解决方案。我真的很惊讶，我在谷歌上搜索的所有解决方案不是使用

asp:Menu

控件，就是只使用列表或表格

我知道

margin:0

auto`并且添加一个宽度是有效的，但是当我把它放在菜单控件中时，我无法让它工作

这是我的主页：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="PageWrapper">
                <header></header>
                <nav>
                    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false" DataSourceID="dsSiteMap" CssClass="MainMenu" />
                    <asp:SiteMapDataSource runat="server" ID="dsSiteMap" ShowStartingNode="false" />
                </nav>
                <section id="MainContent">
                    <asp:ContentPlaceHolder id="cpMainContent" runat="server"></asp:ContentPlaceHolder>
                </section>
                <footer></footer>
            </div>
        </form>
    </body>
</html>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/">
        <siteMapNode url="~/Default.aspx" title="Home"  description="Go to the homepage" />
        <siteMapNode url="~/NewTicket.aspx" title="New Ticket"  description="Create a new ticket" />
        <siteMapNode url="~/Search.aspx" title="Search" description="Search tickets" />
    </siteMapNode>
</siteMap>

有趣的是，当我创建一个标签并将其放置在占位符中时，

margin:0 auto

和

width:auto

居中工作。

我不记得为asp:menu生成的标记，但我认为问题出在您的

主菜单中。您使用width:1366px导航宽度的马赫数，因此即使您将边距设置为右/左自动，也无法工作
要使其居中，您可以或设置比其父级宽度小的宽度，或设置display:inline block用于菜单和文本对齐：居中
两个选项的示例：
我复制了上面的示例#PageWrapper的宽度为1366px，位于页面中心。它包含1366px宽的菜单控件，其单元格在宽度上均匀分布。我在Chrome和IE9中测试了这个。然而，我的网站地图中只有3个项目。这可能与你的问题有关：菜单有多宽
请记住，asp:Menu
呈现为HTML表格，因此当您对其应用样式时，这基本上就是您正在使用的。我建议将
区域调整到您想要的菜单位置，并简单地让菜单用Width=“100%”填充该空间
当然，“浮动”是不必要的。
谢谢大家
我终于弄明白了
我编辑了导航父元素的样式：
nav{
clear: both;
text-align: center;
display: table;
margin: 0 auto;}

因此，我没有将其显示为块，而是将其设置为表。有趣的是，它仍然呈现为列表。
我必须清除它，因为在它之前有一些元素被向左浮动。
通过这个问题，我确实学到了很多关于CSS的知识
只是为了一个造型就有点疯狂。惊讶
尝试将属性添加到菜单的ID中。在您的例子中，它是“Menu1”{width:1366px；margin:0 auto；display:block；}？仍然在左边。谢谢你的链接，我知道它是如何工作的，但是我在CSS上也有同样的想法：。主菜单{border:1px solid#99999；背景色：#555555；display:inline block；margin:0 auto；}但是它仍然在左边，没有改变。我去掉了所有留有margin:0 auto或display:block代码的CSS，以防它被覆盖。不行，我也在我的网页上查到了来源。它在上面显示style=“float:left”。我不知道为什么会这样。我从来没有在CSS或我的master中设置过。有趣的是，我写得很清楚：无论是在线样式还是CSS，页面都完全忽略了我的代码，仍然在源代码中添加了一个float:left。float:left
确实弄乱了居中。您使用错误的属性“取消”了float:left
，该属性不清晰：两个您应该使用float:none。我更新了我的示例：没有更改。当我转到Chrome（F12）上的调试器时，它会显示float:none；财产划掉了。
nav{
clear: both;
text-align: center;
display: table;
margin: 0 auto;}