导航栏不会以常规 CSS 设置居中

Posted 2023-03-29

【中文标题】导航栏不会以常规 CSS 设置居中

【英文标题】：navbar wont center with the regular css settings

【发布时间】：2014-01-27 21:02:14

【问题描述】：

所以我正在尝试将导航栏居中， 我试过了：

.navbar-nav 
display: inline-block;


.navbar-default 
text-align: center; 

但不走运，它只将下拉内容居中...尝试了我在此处找到的关于堆栈溢出的其他一些建议，但仍然无法居中。

我正在使用 bootstrap.css 和一个 flat-ui.css，也许它与它有关。 小提琴：http://jsfiddle.net/MikeStardust/xZ6YM/ 如果小提琴上缺少某些东西，请查看临时网站：http://tf2.site40.net

非常感谢

【参考方案1】：

用container包装它

Working Demo

<div class="container">
<div class="navbar navbar-default">         
            //stuff
</div>    
</div> 

更新：如果您希望外部宽度为全宽，可以使用 header 包裹它。谢谢@kristjanReinhold

Updated Demo

<header class="navbar">
<div class="container">
//stuff
</div>
</header>

【讨论】：

【参考方案2】：

尝试将其放入<div class="container">

【参考方案3】：

inline-block; 只会让 div 的内容宽，要居中，你也必须指定边距！！

.navbar-nav 
   display: inline-block;
   margin:0 auto; /* this will center the div*/

【讨论】：

结果一样，下拉内容居中，但是导航栏没有

你为什么要毁掉 twitter 的引导工作组件。这就是它的重点，易于使用。

@kristjanreinhold ：因为 TBS 提供了工作和设计的基础......但有时，布局需要的不仅仅是现有的类......简单！ :)

有时，但不是在这种情况下。

@MikeStardust ：你的小提琴在ul 标签下没有显示任何东西，即使添加了border:1px solid #000;....请注意更新它jsfiddle.net/xZ6YM/3，这样我们就有了工作要做！ :)