让 ASP:Menu 在页面中间居中答案

【问题标题】：Getting ASP:Menu to center in the middle of the page让 ASP:Menu 在页面中间居中
【发布时间】：2013-10-22 10:07:14
【问题描述】：

我很难找到与asp:Menu 控制和页面居中相关的问题的解决方案。我真的很惊讶我在 Google 上搜索的所有解决方案要么不使用 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>

CSS：

body
{
    margin: 0;
    background-color: gray;
}

#PageWrapper
{
    width: 1366px;
    background-color: white;
    margin: auto;
}

nav
{
    width: 1366px;
    height: 36px;
    background-color: seagreen;
}

nav a
{
    color: #fff;
}

.MainMenu
{
    border: 1px solid #999999;
    width: 1366px;
    height: 19px;
    background-color: #555555;
}

ul.level1
{ 
    display: block;
    width: 300px;
    text-align: center;
    margin: 0 auto;
}

<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 可以居中。

【问题讨论】：

尝试将属性添加到您的菜单 ID。在您的情况下，它是“Menu1”
点赞：#Menu1 { 宽度：1366px;边距：0 自动；显示：块； } ?还是在左边。

标签： c# asp.net css menu centering

【解决方案1】：

谢谢大家。

我终于弄明白了。

我编辑了导航父元素的样式：

nav{
clear: both;
text-align: center;
display: table;
margin: 0 auto;}

因此，我没有将其显示为块，而是将其设置为表格。有趣的是它仍然呈现为一个列表。我要清除它，因为它之前有元素浮动到左侧。通过这个问题，我确实学到了更多关于 CSS 的知识。

仅仅为了一种样式就遇到这么多麻烦，有点疯狂。惊讶

【讨论】：

【解决方案2】：

我不记得生成的 asp:menu 标记，但我认为问题出在您的 .MainMenu 选择器中，您使用 width: 1366px; 定义它与 nav 宽度相匹配，所以即使您设置了边距- 右/左自动它不会工作。

要将其居中，您可以设置宽度小于其父级的宽度，或者您可以为菜单设置display: inline-block;，在导航中设置text-align:center;。

两个选项的示例：http://jsfiddle.net/T9SvT/

【讨论】：

谢谢你的链接，我知道它是如何工作的，但后来我在我的 CSS 上采取了同样的想法： .MainMenu { border: 1px solid #999999;背景颜色：#555555；显示：内联块；边距：0 自动； } 但是它仍然向左侧移动，没有变化。我摆脱了所有具有 margin: 0 auto 或 display: block 遗留代码的 CSS，以防它被覆盖。不行。
我也在我的页面上查看了源代码。它显示 style="float:left" 。我不确定为什么会这样。我从来没有在 CSS 或我的主人中设置过。
有趣的是，我清楚地写下了：无论是内联样式还是 CSS，页面都完全忽略了我的代码，仍然在源代码中放置了一个 float:left。
float:left 确实弄乱了居中。你使用了错误的属性来“取消”float:left，它不是clear:both，你应该使用float: none。我更新了我的例子：jsfiddle.net/T9SvT/1
没有变化。此外，当我在 Chrome (F12) 上使用调试器时，它会显示 float: none;属性被划掉。

【解决方案3】：

我复制了你上面的例子。 #PageWrapper 宽度为 1366 像素，位于页面中心。它包含也是 1366 像素宽的菜单控件，其单元格在宽度上均匀分布。我在 Chrome 和 IE9 中对此进行了测试。但是，我的站点地图中只有 3 个项目。这可能与您的问题有关：菜单有多宽？

请记住，asp:Menu 呈现为 HTML 表格，因此当您对其应用样式时，这基本上就是您正在使用的内容。我建议将<nav> 区域的大小调整到您希望菜单所在的位置，并简单地使菜单用 Width="100%" 填充该空间。

当然“浮动”不是必需的。

【讨论】：