Question

So I have a button group with four buttons, third one has a drop-down menu, but I can’t seem to align it center. The buttons are centered, but the drop-down menu aligns left. I have tried all sorts of css, but nothing has worked. Maybe somebody can help. 🙂

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>

Here’s how I align button group center:

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

I have tried using the same method for drop-down menu, but with no luck. Please help.

Answer 1

Try wrapping the button group in a centered btn-toolbar container.

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

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

Working Example: http://jsfiddle.net/r26Zz/