CSS下拉菜單對齊問題

我有一些問題圍繞着這個問題。基本上我創建了一個下拉菜單，我無法正確定位。我有藍色的背景和黑色的菜單背景，所以你可以看到它是如何在我的藍色背景的底部。我希望黑色以藍色爲中心，如果我能夠在菜單中間獲得一些幫助而不需要求助於行高度的幫助，那將會很好。CSS下拉菜單對齊問題

小提琴：http://jsfiddle.net/mzz2u/

HTML

<div id="nav"> 


<ul id="main-nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Products</a> 
      <ul> 
       <li><a href="#">Apparel</a></li> 
       <li><a href="#">Gloves</a></li> 
       <li><a href="#">Punching Bags</a></li> 
       <li><a href="#">Protection</a></li> 
       <li><a href="#">Accessories</a></li> 
      </ul></li> 
     <li><a href="#">Wholesales</a> 
      <ul> 
       <li><a href="#">Equipment Catalogue</a></li> 
       <li><a href="#">Wholesale Inqueries</a></li> 
      </ul></li> 
     <li><a href="#">Contact</a> 
      <ul> 
       <li><a href="#">Direct Contact</a></li> 
       <li><a href="#">YouTube Channel</a></li> 
       <li><a href="#">LinkedIn Page</a></li> 
       <li><a href="#">Facebook Page</a></li> 
      </ul></li> 
    </ul>

CSS

#nav { 
background-color: #004f99; 
height: 40px; 
vertical-align: text-middle; 
} 
#main-nav, 
#main-nav ul { 
list-style: none; 
} 
#main-nav { 
float: left; 
background-color: #000000; 
} 
#main-nav > li { 
float: left; 
height: 40px; 
} 
#main-nav li a { 
display: block; 
width: 100px; 
height: 40px; 
line-height: 2.0em; 
text-decoration: none; 
} 
#main-nav ul { 
position: absolute; 
display: none; 
z-index: 999; 
} 
#main-nav ul li a { 
width: 150px; 
} 
#main-nav li:hover ul { 
display: block; 
} 
/* Main menu 
------------------------------------------*/ 
#main-nav { 
font-family: Arial; 
font-size: 12px; 
background-image: url('../images/menubg.jpg'); 
} 
#main-nav > li > a { 
color: #ffffff; 
font-weight: bold; 
} 
#main-nav > li:hover > a { 
color: #888888; 
background-color: #ff0000; 
} 

/* Submenu 
------------------------------------------*/ 
#main-nav ul { 
background-color: #111111; 
} 
#main-nav ul li a { 
color: #ffffff; 
} 
#main-nav ul li:hover a { 
background: #888888; 
}

來源

2013-05-12 user2362077

讓我們來看看什麼，我在下面做小提琴：

http://jsfiddle.net/mzz2u/1/

基本上我已經移除#nav vertical-align: text-middle;和配合建立display: block; text-align: center;，以保持它的全寬和對齊居中包裹導航，然後在UL導航我已經把display: inline-block;僅分配neccesary自動寬度和float: none; margin: 0 auto;以父母爲中心。

我希望這可以幫助你，使用顯示屬性時要小心，大部分時間用於常見元素和作品你應該使用block, inline-block, none但是對於網絡上的一些技巧你可能會使用其他的可能性。

編輯：如果要居中鏈接的內容，而無需設置line-height: 40px讓我們添加vertical-align:middle; display: table-cell;以「禮」內部「a」元素

來源

2013-05-12 15:06:48

http://jsfiddle.net/tVAGw/

真正容易居中文字，如果你不卡在它是40px。與定位的問題是在#main-nav ul

來源

2013-05-12 15:08:47 Sam

基本上是默認填充：http://jsfiddle.net/p7q87/

我做了什麼：

++ #main-nav {margin: 0;} 
++ #main-nav li a { position: relative; top: 50%; margin-top: -12px;

來源

2013-05-12 15:25:39 HEDMON

這爲我工作，以及：在

.navbar-right .dropdown-menu{right:0;left:0}

：

http://www.dinewine.com/startbootstrap-agency-1.0.6/index.html

來源

2016-07-07 20:58:14 bethabernathy

CSS下拉菜單對齊問題

回答

相關問題