在引导程序上居中导航栏的元素答案

【问题标题】：Center the elements of a navbar on bootstrap在引导程序上居中导航栏的元素
【发布时间】：2014-03-23 10:34:18
【问题描述】：

我希望导航栏的元素位于中心，我有以下 html：

<div class="navbar navbar-default navbar-fixed-bottom" style="bottom:50px; background:none; border:0px; box-shadow:none;">
            <div class="navbar-inner" style="float: none;">  
                <div class="container-fluid" >
                    <ul class="nav navbar-nav" >   
                      <li><img class="social-media" src="images/facebook.png"></li>
                      <li><img class="social-media" src="images/twitter.png"></li>
                      <li><img class="social-media" src="images/linkedin.png"></li>
                    </ul>  
                </div>
            </div>
        </div>

这是我的css：

.social-media {
    opacity: 0.4;
    margin-left: 15px;
    width: 32px;
    height: 32px;
}

.social-media:hover {
    opacity: 1;
    margin-left: 15px;
    width: 32px;
    height: 32px;
}

我尝试在 html 内的导航栏上使用 text-align:center;，但它不起作用。知道如何解决这个问题吗？

我尝试将 bootstrap.css 更改为

    @media (min-width: 768px) {
  .navbar-nav {
    float: none;
    margin: 0 auto;
    float: none;
    width: 100%;
  }
  .navbar-nav > li {
     float: none;
     text-align: center;
  }

现在我有了这个：

将 bootstrap.css 编辑为：

 .navbar-nav {
    margin: 0;
    display:inline-block !important;
    float:none !important;
  }

我终于得到了：

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

我认为您需要在 UL 上设置 float:none; 并在 UL 的父级上设置 text-align:center;

在 UL 和

上尝试以下 css

*请记住，我正在考虑引导 2.3.2 版本而不是 v3.X（如果不确定），如果您使用其他版本，请告诉我.. *

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

.container-fluid {
width: 100%;
text-align:center;
}

检查以下bootstrap sample

【讨论】：

【解决方案2】：

如果您已将.navbar-nav li 设置为inline-block，请将text-align:center 添加到.navbar-nav，这会将您的图标定位在导航栏的中心。

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

.navbar-nav li{
    display:inline-block;
}

【讨论】：

我更改了 bootstrap.css 添加了您的建议，但实际上没有任何反应。还是谢谢你。

【解决方案3】：

试试这个：

.navbar-nav {
    width: 100px;
    margin: 0 auto;
}

.container-fluid {
width: 100%;
text-align: center;
}

通过将左右边距设置为自动，您是在告诉它使两个边距相同，这将使其居中。不要删除text-align: center。

【讨论】：

实际上没有帮助
答案已编辑。对其进行了测试，它可以与您提供的示例一起使用。