Bootstrap: center any span

Question

I have a problem when using a class to center my span :

.center {
    float:none;
    margin-left: auto;
    margin-right: auto;
}

<div class="row-fluid">
    <div class="center span5">
    <button></button>
    </div>
</div>

This does not work, apparently it is overridden by bootstrap row-* CSS. However if I include the same style in the div directly (style="...") it works.

I think it doesn't work because it doesn't knows the width, so I tried to use an offset, but then when the button isn't centered as well as with the .CSS. I can't specify a width since my button width is set by external JavaScript.

How can I make the .center class work in that case?

Answer 1

You can center it with:

.center {
   margin: 0 auto !important;
   float: none !important;
}

JSFiddle

Or you can use:

.row-fluid [class*="span"].center, .center {
    margin: 0 auto;
    float: none;
}

I tend to avoid !important because you never know when it may differ with some other CSS. Interestingly, the above affect differs on both .row and .row-fluid.