使 ASP:Menu 位于页面中间的中心

本文关键字：中间 于页面 ASP Menu | 更新日期: 2023-09-27 18:35:14

我很难找到与页面中asp:Menu控制和居中相关的问题的解决方案。我真的很惊讶我在 Google 上搜索的所有解决方案要么不使用asp:Menu控件，要么仅使用列表或表格。

我知道margin:0自动"并添加宽度有效，但是当我将其用于菜单控件时，我无法使其工作。

这是我的母版页：

<!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居中工作。

使 ASP:Menu 位于页面中间的中心

谢谢大家。

我终于能够弄清楚了。

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

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

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

仅仅为了一种造型就有点疯狂，因为有这么多麻烦。惊讶

我不记得为 asp：menu 生成的标记，但我认为问题出在您的 .MainMenu 选择器中，您正在定义它width: 1366px; nav宽度，因此即使您设置了边距右/左自动，它也不会起作用。

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

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

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

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

当然，"浮动"应该是不必要的。

相关文章：