无法在MasterPage中居中菜单 [英] Can't Center Menu in MasterPage
本文介绍了无法在MasterPage中居中菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法使用母版页将菜单控件置于页面的中央.除菜单控件外，项目中的所有其他内容均正确居中.我已经尝试了所有我能想到的东西，但没有任何效果.我正在使用Visual Studio 2010和IE9.我必须模仿IE7，否则就不会有任何问题.这是我的母版页的完整源代码:
I cannot get my menu control centered on my pages using a master page. Everything else in my project is centered properly, except the menu control. I''ve tried everything I can think of and nothing has worked. I''m using Visual Studio 2010 and IE9. I''m having to emulate IE7 or else nothing is centered. Here''s the complete source code for my master page:
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPages_MasterPage" %>
<%@ Register Src="../UserControls/MainMenu.ascx" TagName="MainMenu" TagPrefix="uc2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Untitled Page</title>
<link href="../StyleSheets/OTCSStyles.css" rel="stylesheet" type="text/css" />
<link href="../StyleSheets/Calendar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div style="height: 43px; width: 100%; background-color: #225CAC; margin-removed auto; margin-removed auto;">
<table width="640px" cellpadding="0" cellspacing="0">
<tr bgcolor="#225CAC" style="height: 40px;">
<td align="left" valign="baseline" width="120px">
<br />
<asp:Label ID="LBL_User" runat="server" Text="User:" CssClass="bannerleft"></asp:Label>
</td>
<td align="center" width="400px">
<img id="IMG_Banner" runat="server" src="~/Images/BannerTest.jpg" alt="O.T.C.S."
width="400" height="40" önclick="javascript:window.navigate('Home.aspx');" />
</td>
<td align="right" valign="baseline" width="120px">
<br />
<asp:Label ID="LBL_Date" runat="server" Text="Date:" CssClass="bannerright"></asp:Label>
</td>
</tr>
</table>
</div>
<div style="margin:0 auto 0 auto;text-align:center">
<div class="mainmenu">
<uc2:MainMenu ID="MainMenu1" runat="server" />
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
这是"mainmenu"类的CSS:
And here''s the CSS for the "mainmenu" class:
DIV.mainmenu
{
margin: 0 auto 0 auto;
text-align: center;
background-color: #6699CC;
}
推荐答案
不花太多时间在代码中:有一个不太明显的技巧:
考虑您有一些块元素.如果将中心样式应用于它，则其内容将居中，但您需要保留内容不变，但在左右两侧留出相等的空白边距.这是这样的:
Without looking much into your code: there is one non quite obvious trick:
Consider you have some block element. If you apply center style to it, its content will center, but you need to leave content as it is, but provide equal empty margins on left and right. This is how:
margin-left: auto;
margin-right: auto;
希望对您有帮助，
Hope it will help you,
这篇关于无法在MasterPage中居中菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
