引导下拉元素未对齐中心

Question

所以我有一个包含四个按钮的按钮组，第三个有一个下拉菜单，但我似乎无法将其居中对齐。按钮居中，但下拉菜单左对齐。我尝试了各种 css，但没有任何效果。也许有人可以帮忙。 :)

HTML：

<div class="btn-group">
  <a href="#" class="btn btn-info btn-large active">Home</a>
  <a href="#" class="btn btn-info btn-large">Link</a>
  <a href="#" class="btn btn-info btn-large dropdown-toggle" data-toggle="dropdown">   <span class="caret"></span></a>
 <ul class="dropdown-menu">
   <li><a href="#">Linkk1</a></li>
   <li><a href="#">Linkk2</a></li>
   <li><a href="#">Linkk3</a></li>
</ul>
 <a href="#" class="btn btn-info btn-large">Link</a>
</div>

这是我如何对齐按钮组中心：

.btn-group {
 margin: 0 auto; 
 text-align: center;
 font-size:0 !important;
}
.btn-group a {
 display:inline-block;
}

我曾尝试对下拉菜单使用相同的方法，但没有成功。请帮忙。

Answer 1

尝试将按钮组包装在居中的 btn-toolbar 容器中。

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

.btn-toolbar {
  text-align:center;
}

工作示例：http://jsfiddle.net/r26Zz/