Question

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

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

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

此外，我需要将导航标签居中，我尝试将text-center应用于他们，但他们没有移动。

由于某些原因，当我将导航标签从第一个更改为任何其他标签时，整个容器会移动一点，更改其左边距，是不是因为第一个标签内的表格？

这里是我输入代码的workspace link。

请问您能帮我水平居中整个容器，并将导航标签放在蓝色容器的中心（ul元素）吗？

Answer 1

<div class="col-sm-4 col-md-4 user-details">容器似乎居中。然而，其中的元素不是。你需要改变：

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

到此：

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

更新：使导航链接居中。

CSS：

UInt

水平居中Bootstrap3行液容器，包含许多嵌套元素

1 个答案: