Alireza Alireza - 3 months ago 11
CSS Question

Css div center alignment not working

I have tried to make horizontal menu in center of page but 'div align=center' not working properly.



.nav ul {
display: block;
list-style-type: none;
margin: 0;
position: absolute;
}
.nav li {
display: inline-block;
float: left;
}
.nav li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica
Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } .nav li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } .nav div ul {display:block;} .nav li ul { display: none; } .nav
li ul li {
display: block;
float: none;
}
.nav li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
.nav ul > li:hover ul {
display: block;
visibility: visible;
}
.nav ul li:hover > ul {
display: block;
}

<div class="nav">
<ul>

<li><a href="#">Home</a>
</li>
<li>
<a href="#">About </a>
<ul>
<li><a href="#">A1</a>
</li>
<li><a href="#">A2</a>
</li>
</ul>
</li>

</ul>
</div>





sample code
I have tried to make horizontal menu in center of page but 'div align=center' not working properly.

Answer

Remove position:absolute; from your ul and add these minor changes

.nav{
    width: 100%;
}
.nav ul {   
    display:block;
    list-style-type:none;
    margin: 0px auto;
    width: 50%;
}

Here's the solved fiddle