Question

我很难找到与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会以居中为中心。

Answer 1

谢谢大家。

我终于弄清楚了。

我将样式编辑到导航父元素：

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

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

对于一个造型来说，有点麻烦。惊讶

Answer 2

我不记得为asp：menu生成的标记，但我认为问题出在你的.MainMenu选择器中，你用width: 1366px;来定义nav宽度，所以即使你设置margin-right / left auto也不行。

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

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

Answer 3

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

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

当然不应该“漂浮”。

获取ASP：菜单位于页面中间的中心位置

3 个答案: