2013-02-27 15 views
6

So come centrare un div orizzontalmente in CSS. È necessario impostare la larghezza su qualcosa di meno del 100% e avere margine automatico su entrambi i lati sinistro e destro. Voglio fare questo stili predefiniti di Twitter Bootstrap. Non voglio scrivere CSS aggiuntivi. Ti chiedi se è possibile ottenere utilizzando lo stile predefinito utilizzato in Twitter Bootstrap.Centro allineare un div orizzontalmente usando Twitter Bootstrap predefinito CSS

Per impostare la larghezza del div, sto usando span*. Ma span* è float: left. C'è qualche classe, che può impostare la larghezza del div, ma non aggiungerà float: left?

+0

Puoi postare wat hai provato? o creare un jsfiddle. – Shail

+0

Sembra che poiché tutti gli elementi della griglia sono lasciati a sinistra, non c'è modo di centrarli e il loro contenuto senza scrivere alcuni stili personalizzati. Detto questo, come può una persona costruire un sito senza farlo? – isherwood

+0

È possibile rimuovere il floating aggiungendo la classe '.clearfix' – Rockbot

risposta

9

Per allineare orizzontalmente un div che utilizza uno stile di estensione pari (span2, span4, ecc.), È necessario utilizzare l'offset.

<div class="offset3 span6"> 
    ... 
</div> 
+0

Cosa succede se il contenuto da centrare si trova in span1, span3, span5, span7, span9 o span11? –

+0

Se si tratta di un intervallo dispari e devi rispettare questa dimensione esatta, allora dovrai ricorrere all'aggiunta di alcuni CSS personalizzati. – JayGee

3

Usa classe pagination-centered all'interno di un div come:

<div class="row"> 
    <div class="span12 pagination-centered"> 
    <p> content</p> 
    </div> 
</div> 
+0

L'OP sta chiedendo informazioni sulle classi Bootstrap, non su HTML raw. – isherwood

+0

@isherwood mente ... non gli ho dato il codice html .. quelli in cui css proprietà. – Shail

+0

Le proprietà CSS sono in realtà HTML. Di nuovo, l'OP chiedeva lezioni. – isherwood

0

Se l'elemento che si desidera allineare orizzontale è un arco dispari (@JayGee) e si Non voglio scrivere ulteriore CSS (non anche in linea?) quindi la risposta dovrebbe essere: No, non è possibile. Altrimenti vado per la risposta di @ JayGee.

2

Il metodo di bootstrap per centrare il contenuto sembra essere assegnando class="center-block" ad esso: a link to Bootstrap 3 doc page.

Tuttavia, non funzionerà su un'intestazione o un paragrafo. class="text-center" sembra funzionare in questi casi.

0

Sulla base della risposta di @ JayGee.

<div class="row"> 
    <div class="col-sm-offset-4 col-md-offset-4 col-lg-offset-4 col-sm-4 col-md-4 col-lg-4"> 
    ... content here ... 
    </div> 
</div> 
Problemi correlati