css - 水平居中 bootstrap 3 个选项卡

Question

我添加了 center-vertically至 <div class="col-lg-6 col-lg-offset-3">在服务部分，但这似乎不起作用。我还尝试了其他一些方法，但都没有成功。

center-vertically包含:

display: table-cell;
text-align: center;
vertical-align: middle;

查看 live version here (只需转到服务部分查看选项卡)如果您检查选项卡所在的列上的元素，您会在右侧看到一些额外的空间。

Answer 1

parent 应该有:

parent {
  display: table;
}

child :

child {
  display: table-cell;
  vertical-align: middle;
  margin: 0 auto; // if you want horizontal centering too
}

更新

要将您的 UL 在列内水平居中:

<ul class="nav nav-tabs" style="display: inline-block;margin: 0 auto;">

你的 UL 有全宽。 display: inline-block 将对其进行修剪，而 margin: 0 auto 将其置于父元素的中心。