css - 在 bootstrap 上将导航栏的元素居中

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 版本而不是 v3.X(如果不确定)如果你使用其他版本让我知道.. *

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

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

检查以下 bootstrap sample