ブートストラップ：中央任意のスパン

Question

私spanを中心にクラスを使用しているとき、私は問題を抱えている：

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

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

これは明らかにそれがブートストラップ行優先の*のCSSで上書きされ、動作しません。しかし、divに直接同じスタイルを含めると（style="..."）動作します。

幅がわからないので、オフセットを使用しようとしましたが、ボタンが.CSSの中央に配置されていない場合は、機能しません。 buttonの幅は外部JavaScriptによって設定されているので、幅を指定することはできません。

どのようにして.centerクラスを動作させることができますか？

Answer 1

ブートストラップ2.3.0では、組み込みクラス.text-centerを使用できます。

<div class="row-fluid"> 

    <div class="span12 text-center"> 

    My content to be centered here 

    </div> 

</div> 

それは私のために完全に働いた... :)

Answer 2

自動余白法を使用する場合は、要素の幅を定義する必要があります。これは、任意のユニットとすることができるが、定義する必要があります。

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

:)

Answer 3

あなたがして、それを中央にすることができます

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

JSFiddle

それとも、使用することができます。

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

私は!importantを避ける傾向があります。これは、他のCSSと異なる場合があるためです。興味深いことに、上記の影響は、腹水および腹水の両方で異なる。私はdivの中に同じスタイルが含まれている場合

：私はそれは幅

を知っていないので、これはので、本当のことはできません、それは動作しませんと思います

Answer 4

直接（スタイル= "..."）それは動作します

... 1つのケースでは幅が分からない場合は、もう一方ではありません。

style属性を使用している場合、それは問題が特異性の1つであるという兆候です。 specificityがそれらのプロパティをオーバーライドしている（またはその特異性は同じですが、ルールセットは後にスタイルシートに表示されます）どんなルールのセレクタよりも大きくなるように、ルールセットのセレクタを記述します。

ブラウザの開発者ツールを使用して要素に適用されているルールを確認することができます。セレクタが表示されるので、より具体的にする必要があります。

Answer 5

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

はなぜIDKが、それは常に魔法のように動作します。