我在解决这个问题时遇到了一些问题。基本上我已经创建了一个下拉菜单,我无法正确定位。我有蓝色的背景和黑色的菜单背景,所以你可以看到它是如何来到我的蓝色背景底部。我希望黑色能够以蓝色为中心,如果能够在菜单中间对文本进行居中而不必求助于行高,我会很高兴。
小提琴: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;
}
答案 0 :(得分:2)
让我们来看看我在以下小提琴中所做的事情:
基本上我已从#nav中删除了vertical-align: text-middle;
并保留了display: block; text-align: center;
以保持其全宽并对齐以使包裹的导航居中,然后在ul nav中我放display: inline-block;
仅指定必要的自动宽度和float: none; margin: 0 auto;
居中于父级。
我希望这会对你有所帮助,在使用显示属性时要小心,大部分时间用于常见元素和作品你应该使用block, inline-block, none
但是对于网络上的一些技巧你可能会使用其他可能性。
修改:如果您希望将链接的内容居中,而不必设置line-height: 40px
,请将vertical-align:middle; display: table-cell;
添加到“li”中的“a”元素
答案 1 :(得分:0)
如果您没有坚持使用40px,那么真正容易使文本居中。
对齐问题是#main-nav ul
答案 2 :(得分:0)
基本上:http://jsfiddle.net/p7q87/
我做了什么:
++ #main-nav {margin: 0;}
++ #main-nav li a { position: relative; top: 50%; margin-top: -12px;
答案 3 :(得分:0)
这对我也很有用:
.navbar-right .dropdown-menu{right:0;left:0}
在:
http://www.dinewine.com/startbootstrap-agency-1.0.6/index.html