Positionning 3 split-buttons - html

Question

So I have 3 buttons in a row (2 bootstrap split-buttons and 1 basic button) and I want to place them accordingly. So, everyone is inside a div of width: 32%; (themselves in a div of 96%, so exactly the third for each "mini-div"). Then, I want that every button gets centered in their "mini-divs". I tried to margin: auto, but it's not working. I made it with the basic button by using align-text: center. However, the 2 others, which are split-buttons, stick to the left side of their divs.
Here's an image (the blue boxes are the border of the "mini-divs":
Here's my HTML...
<div id="boutons">
<!-- Split button, ajouter -->
<div class="btn-group dropup" id="btn1">
<button type="button" class="btn btn-primary">Ajouter 1 vecteur</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu" id="ajouter">
<li>1 </li>
<li>2 </li>
<li>3</li>
<li>4 </li>
<li>5 </li>
</ul>
</div>
<!-- Split button, enlever -->
<div class="btn-group dropup" id="btn2">
<button type="button" class="btn btn-danger">Enlever 1 vecteur</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu" id="enlever">
<li>1 </li>
<li>2 </li>
<li>3</li>
<li>4 </li>
<li>5 </li>
</ul>
</div>
<div id="btn3">
<button type="button" class="btn btn-info">Activer le graphique</button>
</div>
</div>
... and CSS
#boutons
{
margin-left: auto;
margin-right: auto;
width: 96%;
}
.btn-group a
{
text-align: center;
font-weight: bold !important;
}
#btn1, #btn2, #btn3
{
display: inline-block;
width: 32%;
}
#btn3
{
text-align: center;
}

Answer 1

Put split button (or btn-group) inside another div:
<div id="boutons">
<div id="btn1">
<div class="btn-group dropup" >
<!-- btn-group content -->
</div>
</div>
<div id="btn2">
<div class="btn-group dropup">
<!-- btn-group content -->
</div>
</div>
<div id="btn3">
<button type="button" class="btn btn-info">Activer le graphique</button>
</div>
</div>
and then this css would work perfectly:
#boutons > div {
text-align: center;
}

Answer 2

You have to wrap your buttongroup buttons in an additional div to make the alignment work:
take a look here:
http://www.bootply.com/6FnWLABceC
<div id="btn1">
<div class="btn-group dropup">
...

Answer 3

#btn3
{
text-align: center;
}
Only apply to your btn3
And
.btn-group a
{
text-align: center;
font-weight: bold !important;
}
Is apply to your a inside your btn's
Try:
#btn1,
#btn2,
#btn3{
text-align: center;
}

Answer 4

change your CSS to this
/* CSS used here will be applied after bootstrap.css */
#boutons
{
margin-left: auto;
margin-right: auto;
width: 96%;
}
.btn-group a
{
text-align: center;
font-weight: bold !important;
}
#btn1, #btn2, #btn3
{
display: inline-block;
width: 32%; background:#fc0;text-align: center;
}
#btn3
{
text-align: center;
}
.btn-group > .btn, .btn-group-vertical > .btn{float:none;}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
margin-left: -4px;
}
See Bootply (I changed the bg color so you can see the alignment, but you must obviously adjust it to your needs)