獲取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：在頁面中間位置居中的菜單

回答

相關問題