如何對齊 <div> 居中？

Question

我將菜單添加到項目主頁面的div中。 我希望將以下div對齊到頁面中心。 我已經嘗試過margin: 0px auto; display: block; margin: 0px auto; display: block; 在CSS中。 這不是鍛煉。

 <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>

小提琴

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

如果您未指定width屬性，則DIV將始終占據其父級寬度的100％-除非絕對浮動或絕對放置。

嘗試添加固定或什至靈活的寬度，例如500px或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文件中使用align屬性，例如

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