在引导导航栏中调整链接突出显示区域的大小答案

【问题标题】：Resize Link Highlight Area in Bootstrap Navbar在引导导航栏中调整链接突出显示区域的大小
【发布时间】：2013-07-23 00:14:37
【问题描述】：

我使用 Twitter Bootstrap 在页面中心创建了一个导航栏。我已将三个图标排列在中心，它们之间有一定距离。当我将鼠标悬停在其中一个上时，文本不在突出显示部分的中心。它看起来如下。我希望 Home 或 Tags 恰好位于突出显示部分的中心。

这是我的一小段相关代码。

.navbar .nav > li > a 
{
 float: none ;
 padding: 10px 100px 8px 0px ;
 color: #777777 ;
 text-decoration: none ;
 text-shadow: 0 1px 0 #444 ;
 font-size:20px ;
}


.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover 
{
  color: silver ;
  text-decoration: none ;
  background-color:ThreeDFace  #444 ;   
}

【问题讨论】：

你试过了吗，text-align: center ？

标签： css twitter-bootstrap highlighting navbar

【解决方案1】：

希望对你有帮助！！

更改此 CSS 样式

.navbar .nav > li > a 
{
 float: none ;
 padding: 10px 100px 8px 0px ;
 color: #777777 ;
 text-decoration: none ;
 text-shadow: 0 1px 0 #444 ;
 font-size:20px ;
}

到这里

.navbar .nav > li > a 
{
 float: none ;
 width: 100px; 
 text-align: center;
 color: #777777 ;
 text-decoration: none ;
 text-shadow: 0 1px 0 #444 ;
 font-size:20px ;
}

完成:)

【讨论】：