Css div中心對齊不起作用

Question

我試圖在頁面中心製作水平菜單，但'div align = center'無法正常工作。

.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 我曾試圖彌補橫向菜單頁面的中心，但 'DIV ALIGN =中心' 不能正常工作。

Answer 1

從UL刪除position:absolute;並添加這些細微的變化

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

這裏的解決fiddle

Answer 2

刪除position:absolute;。它不需要任何保證金或填充值。

.nav ul { 
 
list-style-type:none; 
 
margin:0 auto; 
 
display:table; 
 
}

這裏解決了小提琴link

Answer 3

請刪除離開，因爲它是UL position: absolute;風格等造型。這些是您必須執行的其他更改。

.nav { 
    display: -webkit-box; 
} 
.nav ul { 
    margin: 0 auto; 
} 

Answer 4

用作如下：

.nav { 
    margin:0 auto; 
} 

Answer 5

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a, .dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, .dropdown:hover .dropbtn { 
 
    background-color: #19c589; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover {background-color: #f1f1f1} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li class="dropdown"> 
 
    <a href="#" class="dropbtn">About</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">A1</a> 
 
     <a href="#">A2</a> 
 
     <a href="#">A3</a> 
 
    </div> 
 
    </li> 
 
    <li><a href="#news">New</a></li> 
 
</ul>