bootstrap下拉元素不对齐中心

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工具栏容器中。

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

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

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