我在项目的母版页中的 div 内添加了菜单。我希望将以下 div 对齐到页面中心。我在CSS中尝试过
margin: 0px auto; display: block;
。这不是锻炼。
<div>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Home" NavigateUrl="Home.aspx" />
<asp:MenuItem Text="test" NavigateUrl="test.aspx" />
<asp:MenuItem Text="Reports" NavigateUrl="Reports.aspx" />
<asp:MenuItem Text="Review" NavigateUrl="Review.aspx" />
<asp:MenuItem Text="Management" NavigateUrl="mg.aspx" />
<asp:MenuItem Text="Scripts" NavigateUrl="scr.aspx" />
<asp:MenuItem Text="Notification" NavigateUrl="Notification.aspx" />
</Items>
</asp:Menu></div>
CSS
div
{
margin:0px auto;
display: block;
}
.menu ul
{
border-bottom: 1px solid gray;
}
.menu ul li
{
border: 1px solid white;
background-color: gray;
text-decoration: none;
padding: 3px;
margin: 3px;
}
.menu ul li a
{
color: White;
}
.menu ul li a:hover
{
font-weight:bold;
}
margin auto
不会起作用。
<div style="margin:0px auto; display:block; width:500px;">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Home" NavigateUrl="Home.aspx" />
<asp:MenuItem Text="test" NavigateUrl="test.aspx" />
<asp:MenuItem Text="Reports" NavigateUrl="Reports.aspx" />
<asp:MenuItem Text="Review" NavigateUrl="Review.aspx" />
<asp:MenuItem Text="Management" NavigateUrl="mg.aspx" />
<asp:MenuItem Text="Scripts" NavigateUrl="scr.aspx" />
<asp:MenuItem Text="Notification" NavigateUrl="Notification.aspx" />
</Items>
</asp:Menu>
</div>
您还可以使用
align
属性将其居中。
<div align="center">
<ul>
<li> Menu Item 1</li>
<li> Menu Item 2</li>
</ul>
</div>
如果不指定宽度属性,DIV 将始终占据其父级宽度的 100% - 除非浮动或绝对定位。
尝试添加固定甚至灵活的宽度,例如500 像素或 75%。这将允许“margin: 0 auto”部分启动并正确居中您的 div。
另外,除非 div 默认是隐藏的,否则不需要“display:block”,因为 DIV 已经是一个块元素了。
CSS 中的一个小变化给了我一个正在使用的解决方案
display:table
而不是 display:block
div
{
margin:0px auto;
display: table;
}
谢谢大家
在 CSS 文件中使用对齐属性,例如
div
{
margin:0px auto;
display: block;
text-align:center;
}
use this code because we have added style in div tag
<div style="margin:0 auto;width:255px;">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Home" NavigateUrl="Home.aspx" />
<asp:MenuItem Text="test" NavigateUrl="test.aspx" />
<asp:MenuItem Text="Reports" NavigateUrl="Reports.aspx" />
<asp:MenuItem Text="Review" NavigateUrl="Review.aspx" />
<asp:MenuItem Text="Management" NavigateUrl="mg.aspx" />
<asp:MenuItem Text="Scripts" NavigateUrl="scr.aspx" />
<asp:MenuItem Text="Notificati NavigateUrl="Notification.aspx" />
</Items>
</asp:Menu>
<div>