12

クラスを使用して my を中央に配置するときに問題が発生しますspan:

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

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

これは機能しません。明らかに、ブートストラップ row-* CSS によってオーバーライドされます。ただし、同じスタイルを div に直接含めると ( style="...") 機能します。

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

その場合、どうすれば .center クラスを機能させることができますか?

4

6 に答える 6

20

Bootstrap 2.3.0 以降では、組み込みのクラスを使用できます.text-center。

<div class="row-fluid">

    <div class="span12 text-center">

    My content to be centered here

    </div>

</div>

それは私にとって完璧に機能しました... :)

于 2013-07-02T22:51:58.987 に答える
8

次の方法で中央に配置できます。

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

JSFiddle

または、次を使用できます。

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

!important他の CSS といつ異なる可能性があるか分からないため、私は避ける傾向があります。興味深いことに、上記の影響は .row と .row-fluid の両方で異なります。

于 2013-04-29T06:06:17.787 に答える
2 
.class {
    margin:auto; 
    display:table;
}

理由はわかりませんが、それは常に魅力のように機能します。

于 2016-08-20T22:09:23.270 に答える
1

幅がわからないのでうまくいかないと思います

次の理由により、これは当てはまりません。

同じスタイルを div に直接含めると (style="...") 動作します

…そして、一方のケースで幅がわからない場合、もう一方のケースでもわかりません。

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

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

于 2013-04-29T06:08:43.737 に答える