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

Question

我希望导航栏的元素位于中心，我有以下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;
  }

我终于得到了：

Answer 1

我认为你需要在UL上设置float:none;，在UL的父设备上设置text-align:center;

在UL上尝试以下css和

* 记得我正在考虑bootstrap 2.3.2版本NOT v3.X（如果有任何不确定的话）如果你正在使用其他版本让我知道.. *

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

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

检查以下bootstrap sample

Answer 2

试试这个：

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

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

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

Answer 3

如果您将.navbar-nav li设置为inline-block，请将text-align:center添加到.navbar-nav，这会将您的图标置于navabar的中心。

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

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