Question

我意识到这个问题一再被问到，但我根本无法弄清楚如何解决这个问题。我想集中我的下拉导航栏，标题或主要元素，而不是子元素。

这是JSFiddle链接：

#mbwnavbar {
background: #ffffff;
width: 800px;
color: #000000;
margin: 0 auto;
padding: 0;
position: relative;
border-top:0px solid #transparent;
height:35px;
}


#mbwnav {
text-align: center
margin: 0 auto;
padding: 0;
}

#mbwnav ul {
float: left;
list-style: none;
margin: 0 auto;
padding: 0;
}

#mbwnav li {
list-style: none;
margin: 0 auto;
padding: 0;
display:inline;
border-left:0px solid #333;
border-right:0px solid #333;
height: 35px;
} 

#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
color: #000000;
display: inline-block;
font:normal 11px Century Gothic, sans-serif;    margin: 0;
font-weight: bold;
text-align: left;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

#mbwnav li a:hover, #mbwnav li a:active {
background: #ffffff;
color: #fdeae9;
display: block;
text-decoration: none;
margin: 0 auto;
padding: 9px 12px 10px 12px;
}

#mbwnav li {
float: left;
padding: 0;
}

#mbwnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 100px;
margin: 0 auto;
padding: 0;
}

#mbwnav li ul a {
width: 100px;
}

#mbwnav li ul ul {
margin: -25px 0 0 161px;
}

#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav     li.sfhover ul ul ul {
left: -999em;
}

#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
left: auto;
}

#mbwnav li:hover, #mbwnav li.sfhover {
position: static;
}

#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
background: #ffffff;
width: 120px;
color: #000000;
display: block;
font:normal 11px Century Gothic, sans-serif;
margin: 0 auto;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:0px dotted #333;

}

#mbwnav li li a:hover, #mbwnavli li a:active {
background: #ffffff;
color: #fdeae9;
display: block;     margin: 0 auto;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

有人有什么想法吗？很抱歉这么麻烦，我意识到这个问题很受欢迎，但我已经花了几天时间研究这个问题，我无法搞清楚。

谢谢！

Answer 1

执行此操作的简单方法是在容器上使用display: table。这是一个演示，只对CSS进行一些小调整：

http://codepen.io/pageaffairs/pen/zvJmG

Answer 2

http://jsfiddle.net/VerdeletG/02zoptrf/7/

#mbwnav {
    margin:auto;
    display:table;
}

显示表与margin auto非常适用。我调整了你的代码并删除了不必要的行，而我在它的时候！希望它有效!!!

Answer 3

尝试将text-align: center移至#mbwnavbar并将display: inline-block添加到#mbwnav。 text-align: center可以将内联块居中。

示例：

http://codepen.io/anon/pen/DGtfo

Answer 4

我一直在尝试使用不以Chrome移动浏览器为中心的文字解决此问题，我有一个答案，它在尝试了一切之后就有效了！ “文本对齐：中心;”不起作用）

你不需要那些荒谬的代码

试试这个：在下拉列表中（选择）CSS使用此

编码元素

Header always edit Set-Cookie (.*) "$1; HttpOnly; Secure"
#Strip off double Secure or HttpOnly settings as if App and Apache sets above you can sometimes get both
Header always edit Set-Cookie (?i)^(.*);\s?Secure;?\s?(.*)?;?\s?Secure;?\s?(.*)$ "$1; $2; $3; Secure"
Header always edit Set-Cookie (?i)^(.*);\s?HttpOnly;?\s?(.*)?;?\s?HttpOnly;?\s?(.*)$ "$1; $2; $3; HttpOnly"
#Strip off double ;; settings
Header always edit* Set-Cookie (;\s?){2,} "; "

我所有的下拉列表现在都集中在一起。我想这段代码是有效的，因为浏览器正在查看上一个跨度，但是谁知道它有效！

CSS下拉导航栏不会居中

4 个答案: