html - 在 Bootstrap 3 中创建导航栏时,我似乎无法让按钮居中

标签 html css twitter-bootstrap twitter-bootstrap-3 navbar

我正在创建一个带有导航栏的网站。我希望导航栏以 100% 的宽度穿过屏幕,但我需要将按钮居中。 这是我的html代码:

<div class = "collapse navbar-collapse navHeaderCollapse">                           
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">NEWS</a></li>                                           
<li class = "dropdown">

 <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">MEDIA <b class = "caret"></b></a>
 <ul class = "dropdown-menu">
 <li><a href = "#">MUSIC</a></li>
 <li><a href = "#">VIDEO</a></li>
 <li><a href = "#">PICTURES</a></li>                                                     
 </ul>                                          
</li>
<li><a href = "#">SHOWS</a></li>
 <li><a href = "#">Contact</a></li>

  </ul> 

  </div>

还有我的css代码:

 .nav{
 margin-top: 63px;
 height:80px;
 border:1px solid #ccc;
 border-width:1px 0;
 list-style:none;
 margin:0;
//position:left;
 margin-left:0;
 margin-top: 63px;
 padding:0;
 text-align:center;
 background-color: #333;
 width:100%;
 position: absolute;
 left: 0px;
 }

.navbar .navbar-nav{
display:inline-block;
float: none;
}

.nav li{
 text-align: center;
 padding:15px;
 color: white;
 margin-top: 3px;
 margin-left:10px;
 font-size: 20px; 
 }

    .navbar .navbar-collapse {
    text-align: center;
  }

我认为它必须是一个简单的 css 修复,但我似乎只能将整个导航栏居中,而不仅仅是按钮链接。任何帮助都会非常感谢! http://jsfiddle.net/ZguC7/362/代码链接

更新: 现在我改变了

.nav li{ 
 float: none;
 display:inline-block;
  }  

按钮现在居中,但是当导航栏折叠时,导航按钮水平显示而不是垂直显示。关于如何解决这两个问题的任何建议?

最佳答案

移除 li 元素上的 float 并使用 display: inline-block

DEMO

这不是居中的原因(即使 .navtext-align: center)是因为 li 元素是 float left,这将使元素忽略text-align

.nav li {
  float: none;
  display: inline-block;
}

关于html - 在 Bootstrap 3 中创建导航栏时,我似乎无法让按钮居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34216506/

相关文章:

jquery - jQuery ev.preventDefault不触发“a”标签

html - Bootstrap 2 - 折叠响应菜单 Logo 并在同一行切换

css - 如何使用 Bootstrap for Wordpress 将 Sass 实现为下划线主题?

javascript - Jquery 无法在 Firefox 和 IE 上运行,无法在单击链接时执行操作

javascript - 根据单选按钮选择显示/隐藏内容

html - 如何像这样对齐文本和按钮,引导

css - GWT 数据网格 : "Unable to find ImageResource method value("cellTableLoading")"when overriding styles

javascript - 使用来自 CamanJS API 的预设过滤器

javascript - 谷歌地图 - 将光标更改为图像拾取偏移

jquery - 防止 Bootstrap 网格中的图像溢出