我該如何居中這個CSS菜單？

-1

我試過很多方法，但無法獲得此菜單中心..任何想法？我該如何居中這個CSS菜單？

您可以查看這裏的頁面： http://jsbin.com/obecig/1/edit

我嘗試文本對齊：中心在#nav UL選擇，但沒有運氣..

<html> 
<head> 
<style type="text/css"> 
#nav, .nav, #nav .nav li { margin:0px; padding:0px; } 
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;} 
#nav li ul.first {left:-1px; top:100%;} 

li, li a {color:#000;} 
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;} 
#nav li a {display:block; width:inherit; height:inherit;} 

ul.nav { display:none; } 
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; } 
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;} 
li:hover { position:relative; z-index:2000; } 
</style> 
</head> 

<body> 
<ul id="nav"> 
    <li>Menu 1 
     <ul class="nav first"> 
      <li>Menu 1</li> 
      <li>Menu 2</li> 
      <li>Menu 3</li> 
      <li>Menu 4</li> 
     <ul> 
    </li> 
    <li>Menu 2</li> 
    <li>Menu 3</li> 
    <li>Menu 4</li> 
</ul> 
</body> 

</html>

來源

2012-10-31 etaiso

看到大家如何回答同樣的事情，沒有人費心去解釋爲什麼...這裏我們去：

大家都知道，以不知道如何爲中心的塊級元素可能會很痛苦。首先，我們大多數人知道margin: 0 auto;的作品，但不是每個人都知道爲什麼。

margin: 0 auto;的快速分解與CSS接受某些屬性的簡寫符號的方式有關。說margin你當然是針對給定元素的邊際和0部分是使用速記符號說：0頂部和0底部...同時加入auto在最後你說：自動保證金左側和右側的自動保證金。

如果您沒有爲相關元素定義寬度，上述操作將不起作用。在這種情況下，元素的ID屬性爲#nav ...這就是爲什麼每個人在答案中給出的示例都有固定的寬度。其背後的邏輯是，塊級元素默認擴展其父容器的100％，除非您在CSS中專門定義了其他元素。

所以理論上這也適用於居中，雖然它是更多的標記，而不是最簡單的方法，我只是爲了說明目的而顯示它。

#nav { 
    width: 300px; 
    margin-left: auto; 
    margin-right: auto; 
}

大家更習慣於像這樣看待它......我們這樣使用它，因爲它更短。

#nav { 
    width: 300px; 
    margin: 0 auto; 
}

零不是必須的......請記住，它是元素的頂部和底部邊距。所以說，下面是一個例子，底部有20像素的邊距並居中。

#nav { 
    width: 300px; 
    margin: 0 auto 20px auto; 
}

最後但並非最不重要...該物業（margin）的簡寫形式是一樣的：border，padding等，從頂級球星......要順時針向右和向左底部在兩者之間。

所以它是：頂部，右側，底部，左側。像這樣：margin: 10px 20px 30px 40px

來源

2013-08-10 16:32:44 sulfureous

爲中心的東西，它需要的寬度，以及保證金：0汽車，因此，如果您添加以下代碼：

#nav { 
    width: 100px; 
    margin: 0 auto; 
}

它應該（和爲我做的）工作

來源

2012-10-31 16:14:52 Andy

謝謝..工作正常！ – etaiso

您需要給它一個寬度，然後將水平邊距設置爲自動。無論如何，這是最快捷的方式。

添加到您的CSS：

#nav 
{ 
    width:100px; 
    margin: 0 auto; 
}

來源

2012-10-31 16:15:42 SamHuckaby

#nav{ 
width:80px; 
margin: 0 auto;}

來源

2012-10-31 16:18:47

我該如何居中這個CSS菜單？

回答

相關問題