CODEWITHSUNDEEP
cssasp.netalignment
Sam1604
Sam1604

Reputation: 1489

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

Upvotes: 1

Views: 10063

Answers (6)

Divyesh
Divyesh

Reputation: 329

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>

Upvotes: 0

Rahul Tagore
Rahul Tagore

Reputation: 101

Use align property in your CSS file e.g.

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

Upvotes: 0

khurram
khurram

Reputation: 946

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>

Upvotes: 2

Sam1604
Sam1604

Reputation: 1489

One small change in css gave me a solution i'm using display:table istead of display:block

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

Thanks all

Upvotes: 0

Huuuda
Huuuda

Reputation: 21

If you don't specify the width attribute, a DIV will always take up 100% of its parent's width - unless floating or positioned absolutely.

Try adding a fixed or even flexible width, e.g. 500px or 75%. This will allow the "margin: 0 auto" part kick in and center your div properly.

Also, unless the div is supposed to be hidden by default, there's no need for the "display:block", as DIV is a block element already.

Upvotes: 0

user5620170
user5620170

Reputation:

You can also use align property to center it.

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

Fiddle

Upvotes: 1

Related Questions