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/