I'm using twitter-bootstrap, and i found it fairly hard to center div
which has class .btn-group
(link).
Usually, I use
margin: 0 auto;
or
text-align: center;
to center stuff within div, but it doesn't work when inner element has property float: left
which in this case uses for visual effects.
Best Answer
Edited: This has changed as of Bootstrap 3. See solution for Bootstrap 3 below.
Is adding a wrapping div out of the question?
Look at this example: http://jsfiddle.net/EVmwe/4/
Important part of the code:
Wrapping the button group within a division, and setting the div to text-align center. The button group must also be overwritten to have display inline-block and inherited width.
Overwriting the anchors display to inline-block, and float: none, would also probably work, as @Andres Ilich said.
Update for Bootstrap 3
As of Bootstrap 3, you have alignment classes (as seen in the documentation). You now simply have to add the
text-center
class to a parent. Like so:See working example here: http://jsfiddle.net/EVmwe/409/