如何将下拉菜单文本居中？

Posted 2023-03-06

【中文标题】如何将下拉菜单文本居中？

【英文标题】：How Do I Center Drop Down Menu Text?

【发布时间】：2013-03-22 23:04:53

【问题描述】：

我是一名学生，正在为一个项目制作模拟网站。 网址：http://www.brightpixelstudios.com

在“关于”下，您会找到一个下拉菜单。我正在尝试将这个下拉菜单的文本居中，但作为一个 CSS 菜鸟，我很难过。

这是覆盖下拉菜单的模板 CSS：

.nav li ul   background: #fff; margin:5px 0 0; padding:10px 0 0; position: absolute; left: -999em; width: 180px; border: 1px solid #e3e3e3; z-index:9999; 
.nav li ul li  margin:0; 
.nav li ul li a   padding: 8px 15px; width:150px; color:#666 !important; background: none; font-size:0.8em;
.nav li ul li a:hover   font-weight: bold; 
.nav li ul li a.sf-with-ul  padding-right:0; 
.nav li ul ul   margin: -35px 0 0 170px !important; 

.nav li ul li a:hover, 
.nav li.current_page_item ul li a, 
.nav li.current_page_parent ul li a,
.nav li.current-menu-ancestor ul li a,
.nav li.current-cat a ul li,
.nav li.current-menu-item ul li a,
.nav li.sfHover ul li  background:none;

.nav li:hover,.nav li.hover   position:static; 
.nav li:hover ul ul, .nav li.sfhover ul ul,
.nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
.nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul  left:-999em; 
.nav li:hover ul, .nav li.sfhover ul,
.nav li li:hover ul, .nav li li.sfhover ul,
.nav li li li:hover ul, .nav li li li.sfhover ul,
.nav li li li li:hover ul, .nav li li li li.sfhover ul   left:auto; /* margin-left:-50px; */ 

.nav .sf-sub-indicator background: url(images/arrow-superfish.png) no-repeat;position:absolute;display:block;right:0.4em;top:44%;width:10px;height:10px;text-indent:-999em;overflow:hidden;
.nav li ul .sf-sub-indicator background:url(images/arrow-superfish-right.png) no-repeat; top:38%; 

如果有人能帮我解决这个问题，我将不胜感激。

【参考方案1】：

将text-align: center; 用于#navigation .nav li ul li a

在你的style.css line 242

【讨论】：

@KaloyanIvanov 在所有 CSS 中查找是一种笨方法，让我们聪明点并使用 Firebug ;)