Bootstrap: the center of 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 the row- * CSS bootstrap. However, if I include the same style in the div directly ( style="..." ), it works.

I think this does not work because it does not know the width, so I tried to use the offset, but when the button is not centered, and also with .CSS. I cannot specify the width, since my button width is set by external JavaScript.

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

Answer 1

Starting with Bootstrap 2.3.0 you can use the built-in class .text-center .

 <div class="row-fluid"> <div class="span12 text-center"> My content to be centered here </div> </div> 

It worked great for me ... :)

Answer 2

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 try to avoid !important because you never know when it might differ from other CSS. Interestingly, the above affect differs both in y. And in the liquid.

Answer 3

When using the auto-tagging method, you must determine the width of the element. It can be any unit, but it must be defined:

 .center { width: 50%; margin-left: auto; margin-right: auto; } 

:)

Answer 4

 .class { margin:auto; display:table; } 

Come why, but it always works like a charm.

Answer 5

I think this does not work because it does not know the width

This cannot be true because:

if I include the same style in the div directly (style = "..."), it works

... and if he did not know the width in one case, then it would not be in another.

If the style attribute is used, then this is a sign that the problem is one of the features. Write a selector for your rule set so that the specificity is greater than any rule that overrides these properties (or so that the specificity is equal but the rule set appears later in the stylesheet).

You can use your browser’s Developer Tools to find out what rules apply to the element so you can see the selector, which should be more specific than.