爲什麼我不能居中我的菜單欄？

我對HTML和CSS相當陌生。我正在製作一個菜單欄水平，我似乎無法將其對齊到屏幕中心。我試過margin:0 auto;和<body align=center>，但似乎都沒有工作。爲什麼我不能居中我的菜單欄？

這裏是我的代碼：

<html> 
<head> 

<style> 

#menu { 
margin:0 auto; 
float:left; 
list-style:none; 
padding:0; 
border-top:1 solid #ccc; 
border-left:1 solid #ccc; 
border-bottom:1 solid #ccc; 
} 

#menu li { 
float:left; 
background-color:#f2f2f2; 
} 

#menu li a { 
display:block; 
padding:10px 80px; 
text-decoration:none; 
color:#069; 
border-right:1px solid #ccc; 
font-weight:bold; 
} 

#menu li a:hover { 
color:#c00; 
background-color:#fff; 
} 

</style> 

</head> 

<body> 

<ul id="menu"> 
<li><a href="#">Home</a></li> 
<li><a href="#">Gallery</a></li> 
<li><a href="#">Contact</a></li> 
<li><a href="#">FAQs</a></li> 
<li><a href="#">Donate</a></li> 
</ul> 

</body> 
</html>

正如你所看到的，我使用的是margin:0 auto;，但它不工作。

來源

2012-04-04 Arbitur

您嘗試過哪些瀏覽器？僅在IE，Chrome或Firefox中無法使用？ – Tyn 2012-04-04 15:54:50

您有float元素。除非您的容器被視爲塊或內聯塊，否則浮動元素將不會遵循該居中。

爲了達到預期的效果，您需要執行類似於this example的操作。

通過添加一個容器，中心邊距和使用display: inline-block對#menu他們將像正常內容中心。請注意，這可能不適用於IE，在這種情況下，您應該添加一行*display: inline;。

Example |代碼

HTML

<div class='container'> 
    <ul id="menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Gallery</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">FAQs</a></li> 
     <li><a href="#">Donate</a></li> 
    </ul> 
</div>

CSS

.container{ 
    text-align: center; 
    width: auto; 
    margin: 0 auto; 
} 

#menu { 
    margin:0 auto; 
    display: inline-block; 
    list-style:none; 
    padding:0; 
    border-top:1 solid #ccc; 
    border-left:1 solid #ccc; 
    border-bottom:1 solid #ccc; 
} 

#menu li { 
    float: left; 
    background-color:#f2f2f2; 
} 

#menu li a { 
    display:block; 
    padding:10px 10px; 
    text-decoration:none; 
    color:#069; 
    border-right:1px solid #ccc; 
    font-weight:bold; 
} 

#menu li a:hover { 
    color:#c00; 
    background-color:#fff; 
}

來源

2012-04-04 16:01:02 ShadowScripter

很好的例子:) – Arbitur 2012-04-05 13:02:33

如果你想將它放在它的父元素（在本例中是body）中，給你的菜單一個寬度。另外，刪除你的浮點數 - 如果你將它浮動到另一個方向，它不會居中。

來源

2012-04-04 15:56:11 kinakuta

謝謝你，我不知道我不得不集中整個身體。正如我之前所說的我是HTML和CSS的新手。 ;） – Arbitur 2012-04-04 16:05:31

@Arbitur查看我的答案的例子。 – ShadowScripter 2012-04-04 16:10:02

您可以給菜單寬度width: 400px;或您想要的寬度是什麼。然後，您可以將左右邊距設置爲自動margin-left: auto; margin-right: auto;

來源

2012-04-04 15:56:55

你需要給一個寬度你menu並刪除float:left

如。

#menu { 
margin:0 auto;  
list-style:none; 
padding:0; 
border-top:1 solid #ccc; 
border-left:1 solid #ccc; 
border-bottom:1 solid #ccc; 
width:900px; 
display:block; 
}

來源

2012-04-04 16:01:10

由於內容（'li's）也是浮動的，所以這不會使內容居中。 – ShadowScripter 2012-04-04 16:09:04

爲什麼我不能居中我的菜單欄？

回答

相關問題