html - 具有许多嵌套元素的水平居中 Bootstrap3 row-fluid 容器

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;
}