以页脚为中心的bootstrap导航栏

Question

我想在div中居ul标签 我的Html代码

<footer>
     <div class="wrap">
       <ul class="nav navbar-nav social">
           <li><a href="#">FB</a></li>
           <li><a href="#">Li</a></li>
           <li><a href="#">TW</a></li>
           <li><a href="#">You</a></li>
        </ul>
      </div>
</footer>

和css

footer{
    position: fixed;
    width: 100%;
    background: red;
    height: 70px;
    bottom: 0;
    z-index: 6;
}
footer .wrap{
    margin: 10px auto;

}
.social{
    width: 250px;
}

我发布了我的实际情况的截图：

P.S：我做了回应，对不起我的英语

Answer 1

在您的情况下，您可以取消navbar-nav元素上的浮点数，然后将其与margin: 0 auto居中：

.social {
    width: 250px;
    float: none;
    margin: 0 auto;
}

演示：http://plnkr.co/edit/dmH6ySgEO5XnwXBbE7gt?p=preview

Answer 2

这是Fiddle

使用这个html：

 <footer>
  <div class="wrap text-center">
   <ul class="nav navbar-nav social center-text">
       <li><a href="#">FB</a></li>
       <li><a href="#">Li</a></li>
       <li><a href="#">TW</a></li>
       <li><a href="#">You</a></li>
    </ul>
   </div>
  </footer>

添加此css：

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

Answer 3

好像你正试图将文本居中在div中。因此，您可以尝试.social: text-align:center;

Answer 4

我一直在Navbar的父<div>中使用此类，它会自动拆分边距：

.center {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

在你的情况下看起来像：

<div class="wrap center">

Answer 5

只需将此行添加到页脚.wrap：

footer.wrap {
   text-align: center
}

检查代码段

footer {
  position: fixed;
  width: 100%;
  background: red;
  height: 70px;
  bottom: 0;
  z-index: 6;
}
footer .wrap {
  margin: 10px auto;
  text-align: center;
}
footer ul {
  list-style: none;
}
footer li {
  display: inline-block;
}

<footer>
  <div class="wrap">
    <ul class="nav navbar-nav social">
      <li><a href="#">FB</a>
      </li>
      <li><a href="#">Li</a>
      </li>
      <li><a href="#">TW</a>
      </li>
      <li><a href="#">You</a>
      </li>
    </ul>
  </div>
</footer>

查看小提琴here