How to align <div> to center? - css

Question

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

Answer 1

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>

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

Use align property in your CSS file e.g.
div
{
margin:0px auto;
display: block;
text-align:center;
}

Answer 6

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>