获取ASP：在页面中间位置居中的菜单

我很难找到解决我的问题的方法，该问题涉及到页面中的asp:Menu控件和居中。我非常惊讶我在Google上搜索的所有解决方案都不是使用asp:Menu控件，或者仅仅使用列表或表格。获取ASP：在页面中间位置居中的菜单

我知道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工作在居中。

来源

2013-10-14 HaleStorm87

尝试添加属性到您的菜单的ID。在你的情况下它“Menu1” – CSharper

Like：＃Menu1 { width：1366px; margin：0 auto; display：block; } ？仍然在左边。 – HaleStorm87

谢谢大家。

我终于弄明白了。

我编辑造型到我的资产净值父元素：的

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

所以代替具有它显示为我将其设置为一个表的块。有趣的是，它仍然是一个列表。我有清楚，因为我有它之前浮动到左边的元素。我对这个问题肯定了解了更多关于CSS的知识。

这种疯狂让人为了一个造型而陷入困境。惊奇

来源

2013-10-17 13:44:30 HaleStorm87

我不记得了ASP生成的标记：菜单，但我认为这个问题是在你的.MainMenu选择，你用什么样width: 1366px;的maches宽度nav定义它，所以即使你设置保证金左/右自动它不会工作。

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

两个选项

例子：http://jsfiddle.net/T9SvT/

来源

2013-10-14 19:22:44 Luizgrs

谢谢你的链接，我看它是如何工作的，但后来我对我的CSS采取了同样的想法： .MainMenu { border：1px solid＃999999; background-color：＃555555; display：inline-block; margin：0 auto; } 但它仍然走到左边，没有改变。我摆脱了所有有裕量的CSS：0 auto或display：阻止代码以防万一它被覆盖。不行。 – HaleStorm87

我也检查了我的网页上的来源。它显示style =“float：left”就可以了。我不确定它为什么会这样。我从来没有在CSS或我的主人设置。 – HaleStorm87

有趣的是，我清楚地写道：无论是在线样式还是在CSS上，页面都完全忽略了我的代码，并且仍然在源代码中放置了一个float：left。 – HaleStorm87

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

请记住，asp:Menu呈现为HTML表格，所以当您将样式应用于它时，基本上就是您正在处理的内容。我会建议将<nav>区域调整到你想要菜单的位置，并简单地让菜单用Width =“100％”填充该空间。

当然“浮动”不应该是必要的。

来源

2013-10-15 21:09:33 pseudocoder

获取ASP：在页面中间位置居中的菜单

回答

相关问题