具有许多嵌套元素的水平居中 Bootstrap3 行流体容器

Question

我一直在尝试将 .row-fluid 容器与许多其他嵌套元素水平居中，但找不到正确的方法。

基本上，它是带有 4 个标签的用户帐户页面。

这是现在的样子：codepen.io full page view

另外，我需要将导航选项卡居中，我尝试将text-center 应用于它们，但它们没有移动。

由于某种原因，当我将导航选项卡从第一个更改为任何其他选项卡时，整个容器移动了一点，改变了它的左边距，是因为第一个选项卡内的表格吗？

这是我输入代码的workspace link。

您能否帮我将整个容器水平居中并将导航选项卡放置在其蓝色容器的中心（ul 元素）？

Answer 1

.row-fluid 容器似乎居中。然而里面的元素不是。你需要改变：

  <div class="col-sm-4 col-md-4 user-details">

到这里：

  <div class="col-sm-4 col-md-4 col-md-offset-4 user-details">

更新：使导航链接居中。

CSS：

.user-info-block .navigation {
  width: 100%;
  margin:0;
  padding: 18px 0;
  list-style: none;
  border-bottom: 1px solid #428BCA;
  border-top: 1px solid #428BCA;
  text-align: center;
}

.navigation li {
  display:inline;
}

.navigation li a {
  padding: 20px 30px;
}