如何让<div>居中？

Question

我在项目的母版页中添加 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;
}

Answer 1

您也可以使用 align 属性将其居中。

<div align="center">
  <ul>
    <li> Menu Item 1</li>
    <li> Menu Item 2</li>
  </ul>
</div>

Fiddle

Answer 2

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>

Answer 3

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>

Answer 4

如果您不指定宽度属性，DIV 将始终占据其父级宽度的 100% - 除非浮动或绝对定位。

尝试添加固定甚至灵活的宽度，例如500 像素或 75%。这将允许 "margin: 0 auto" 部分启动并正确居中 div。

此外，除非 div 应该默认隐藏，否则不需要 "display:block"，因为 DIV 已经是一个块元素。

Answer 5

css 中的一个小改动给了我一个解决方案，我正在使用 display:table 而不是 display:block

   div
    {
        margin:0px auto;
        display: table;
    }

谢谢大家

Answer 6

在 CSS 文件中使用对齐属性，例如

div
    {
        margin:0px auto;
        display: block;
        text-align:center;
    }

如何让<div>居中？

How to align <div> to center?

css

asp.net

alignment