Bootstrap: Centrum dowolny okres

Question

mam problem przy korzystaniu z klasy do centrum mojego span:

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

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

ten nie działa, podobno jest przesłonięta przez bootstrap row- * CSS. Jednak jeśli zawrzeć ten sam styl w div bezpośrednio (style="...") to działa.

Myślę, że to nie działa, ponieważ nie zna szerokości, więc próbowałem użyć przesunięcia, ale wtedy, gdy przycisk nie jest wyśrodkowany tak samo jak z .CSS. Nie mogę określić szerokości, ponieważ moja szerokość button jest ustawiana przez zewnętrzny JavaScript.

Jak mogę w takim przypadku wykonać pracę w klasie .center?

Answer 1

Od wersji Bootstrap 2.3.0 można używać wbudowanej klasy .text-center.

<div class="row-fluid"> 

    <div class="span12 text-center"> 

    My content to be centered here 

    </div> 

</div> 

To działało idealnie dla mnie ... :)

Answer 2

Podczas korzystania z metody automatycznego marginesu należy zdefiniować szerokość elementu. Może to być dowolna jednostka, ale to musi być zdefiniowane:

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

:)

Answer 3

można wyśrodkować go:

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

JSFiddle

Albo można użyć:

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

Staram się unikać !important, ponieważ nigdy nie wiadomo, kiedy może się różnić w niektórych innych CSS. Co ciekawe, powyższy wpływ różni się zarówno na .row, jak i .row-fluid.

Answer 4

myślę, że to nie działa, ponieważ nie wie, szerokość

To nie może być prawdą, ponieważ:

jeśli to ten sam styl w div bezpośrednio (styl = "...") działa

... a jeśli nie zna szerokości w jednym przypadku, to nie w drugiej.

Jeśli używasz atrybutu style, oznacza to, że problem polega na specyfice. Napisz selektor swojego zestawu reguł, tak aby specificity był większy niż dowolna reguła, która przesłania te właściwości (lub tak, że specyficzność jest równa, ale zestaw reguł pojawia się później w arkuszu stylów).

Możesz użyć narzędzi programistycznych przeglądarki, aby zobaczyć, które reguły są stosowane do elementu, aby zobaczyć selektor, który musi być bardziej szczegółowy niż.

Answer 5

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

Idk dlaczego, ale zawsze działa jak czar.