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

Question

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

基本上，它是具有 4 个选项卡的用户帐户页面。

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

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

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

这是我输入代码的 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;
}

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

Horizontally center Bootstrap3 row-fluid container with many nested elements

html

css

twitter-bootstrap-3

centering