0

所以我有一个包含四个按钮的按钮组,第三个有一个下拉菜单,但我似乎无法将其居中对齐。按钮居中,但下拉菜单左对齐。我尝试了各种 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;
}

我曾尝试对下拉菜单使用相同的方法,但没有运气。请帮忙。

4

1 回答 1

3

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

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

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

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

于 2012-10-29T11:18:17.587 回答