将导航条的元素集中在引导程序上

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中的navbar上使用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和

*请记住，我正在考虑引导2.3.2版本，而不是v3.X (如果有任何不确定的话)，如果您正在使用其他版本，请告诉我。*

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

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

检查下面的自举样本

Answer 2

试试这个：

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

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

通过将左边距和右边距设置为auto，您将告诉它使两个边距相同，这将使其中心化。不要删除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;
}