我如何居中此CSS菜單？
[英]How can I center this CSS menu?
問題描述
我嘗試了很多方法，但無法使此菜單居中..有什么想法嗎？
您可以在此處查看頁面： http : //jsbin.com/obecig/1/edit
我在#nav ul選擇器中嘗試了text-align：center，但是沒有運氣。
<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>
4 個解決方案
解決方案1
2 已采納 2013-08-10 16:32:44
看到每個人如何回答同一件事，沒有人願意解釋原因...我們開始：
眾所周知，當您不知道如何居中時，將塊級元素居中會很痛苦。 首先，我們大多數人都知道margin: 0 auto; 可行，但並非所有人都知道原因。
margin: 0 auto;快速細分margin: 0 auto; 與CSS接受某些屬性的縮寫符號的方式有關。 說margin您當然是以給定元素的margin為目標，而0部分使用簡寫表示：頂部為0，底部為0 ...而在末尾添加auto時，您會說：左邊，自動邊距在右邊。
如果您所討論的元素的寬度沒有定義，則上述方法將無效。 在這種情況下，元素的ID屬性為#nav ...。這就是為什么每個人在答案中給出的示例都具有固定寬度的原因。 其背后的邏輯是，默認情況下，除非您在CSS中另外明確定義，否則塊級元素默認擴展其父容器的100％。
因此，從理論上講，這也適用於居中，雖然它是更多標記，但不是出於簡單起見的最佳方法，但我僅出於說明目的顯示它。
#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等。它從頂部開始……沿順時針方向向左移動，在兩者之間有Right和Bottom。
就是這樣：上，右，下，左。 像這樣： margin: 10px 20px 30px 40px
解決方案2
1 2012-10-31 16:15:42
您需要給它一個寬度，然后將水平邊距設置為auto。 無論如何，這是最快的方法。
將此添加到您的CSS：
#nav
{
width:100px;
margin: 0 auto;
}
解決方案3
0 2012-10-31 16:14:52
要居中，它需要一個寬度和邊距：0自動，因此，如果添加此代碼：
#nav {
width: 100px;
margin: 0 auto;
}
它應該（並且為我做了）工作
解決方案4
0 2012-10-31 16:18:47
#nav{
width:80px;
margin: 0 auto;}
如何使菜單居中？ CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.