cssasp.netalignment

How to align <div> to center?


I add the menu inside div in Master page of my project. I wish to align the following div to center of the page. i have tried margin: 0px auto; display: block; in CSS. It isn't workout.

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

Solution

  • margin auto do not work until you do not give the width of that element.

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