2

我在解决这个问题时遇到了一些问题。基本上我已经创建了一个下拉菜单，但我无法正确定位它。我有蓝色背景和黑色菜单背景，所以你可以看到它是如何出现在我的蓝色背景底部的。我希望黑色也以蓝色居中，如果我能得到一些帮助将文本在菜单中间居中而不必求助于行高，那就太好了。

小提琴：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;
}
4

4 回答 4

2

让我们看看我在下面的小提琴中做了什么：

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

基本上我已经vertical-align: text-middle;从#nav 中删除并稳定display: block; text-align: center;以保持它的全宽并对齐以使包裹的导航居中，然后在 ul 导航中我display: inline-block;只分配必要的自动宽度并float: none; margin: 0 auto;居中到父级。

我希望这对您有所帮助，在使用显示属性时要小心，大部分时间用于您应该使用的常见元素和作品，block, inline-block, none但对于网络上的一些技巧，您可能会使用其他可能性。

编辑：如果您想使链接的内容居中而无需设置，请line-height: 40px添加vertical-align:middle; display: table-cell;到“li”内的“a”元素

于 2013-05-12T15:06:48.647 回答
0

http://jsfiddle.net/tVAGw/

如果你不坚持它是 40 像素，那么将文本居中真的很容易。对齐的问题是默认填充#main-nav ul

于 2013-05-12T15:08:47.683 回答
0

基本上：http: //jsfiddle.net/p7q87/

我做了什么：

++ #main-nav {margin: 0;}
++ #main-nav li a { position: relative; top: 50%; margin-top: -12px;
于 2013-05-12T15:25:39.383 回答
0

这也对我有用：

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

在：

http://www.dinewine.com/startbootstrap-agency-1.0.6/index.html
于 2016-07-07T20:58:14.980 回答