Bootstrap: Centro qualsiasi lasso

Question

Ho un problema quando si utilizza una classe per centrare il mio span:

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

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

Questo non funziona, a quanto pare viene sovrascritto dal bootstrap row- * CSS. Tuttavia, se includo lo stesso stile nel div direttamente (style="..."), funziona.

Penso che non funzioni perché non conosce la larghezza, quindi ho provato a usare un offset, ma poi quando il pulsante non è centrato così come con .CSS. Non posso specificare una larghezza poiché la mia larghezza di button è impostata da JavaScript esterno.

Come posso far funzionare la classe .center in questo caso?

Answer 1

A partire da Bootstrap 2.3.0 è possibile utilizzare la classe integrata .text-center.

<div class="row-fluid"> 

    <div class="span12 text-center"> 

    My content to be centered here 

    </div> 

</div> 

ha funzionato perfettamente per me ... :)

Answer 2

Quando si utilizza il metodo del margine automatico, è necessario definire una larghezza per l'elemento. Può essere qualsiasi unità, ma deve essere definita:

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

:)

Answer 3

è possibile centrare con:

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

JSFiddle

oppure è possibile utilizzare:

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

Tendo ad evitare !important perché non si sa mai quando potrebbe differire da qualche altro CSS. È interessante notare che l'effetto di cui sopra differisce sia su .row che sul.

Answer 4

penso che non funziona perché non conosce la larghezza

Questo non può essere vero, perché:

se includono lo stesso stile del div direttamente (style = "...") funziona

... e se non conoscesse la larghezza in un caso, non sarebbe nemmeno nell'altro.

Se si utilizza un attributo style, significa che il problema è uno di specificità. Scrivi il selettore del tuo set di regole in modo che lo specificity sia maggiore di quello che qualsiasi regola sta sovrascrivendo quelle proprietà (o che la specificità è uguale ma il set di regole appare più avanti nel foglio di stile).

È possibile utilizzare gli Strumenti di sviluppo del browser per vedere quali regole vengono applicate all'elemento in modo da poter vedere il selettore che deve essere più specifico di.

Answer 5

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

IDK perché, ma funziona sempre come un fascino.