Impossibile centrare div il bootstrap 3

Sono in grado di centrare un sacco di div da quando aggiorno il mio bootstrap 2,1-3,0Impossibile centrare div il bootstrap 3

Ad esempio, con questo codice:

<div id="center" class="container"> 
    <div class="row"> 
     <div class="btn-toolbar"> 
      <div class="btn-group"> 
       <a class="btn btn-default" href="#">test</a> 
      </div> 
     </div> 

     <br /> 

     <p>Am I centered ?</p> 
     <a class="btn btn-default" href="#">Back</a> 
    </div> 

</div>

ho avuto questa regola :

#center { 
    margin: 0 auto; 
}

Ma il risultato è: enter image description here

O r un altro esempio, come centrare questo:

<div id="center" class="container"> 
    <div class="row"> 
     <li class="col-md-5"> 
      <ul class="list-unstyled"> 
       <li><i class="icon-user"></i> aaaaaaaaa</li> 
       <li><i class="icon-envelope"></i> bbbbbbbbbb</li> 
       <li><i class="icon-envelopebug"></i> cccccccccccc</li> 
      </ul> 
     </li> 
     <li class="col-md-5"> 
      <ul class="list-unstyled"> 
       <li><i class="icon-user"></i> aaaaaaaaa</li> 
       <li><i class="icon-envelope"></i> bbbbbbbbbb</li> 
       <li><i class="icon-envelopebug"></i> cccccccccccc</li> 
      </ul> 
     </li> 
    </div> 
</div>

enter image description here

Grazie per il vostro aiuto

fonte

2013-09-26 Stéphane J.

Per centrare un elemento di livello blocco utilizzando margin: 0 auto; deve anche avere una larghezza che è più piccolo rispetto al suo blocco contenitore (per il valore auto di senso) - perché #container si attraversa la larghezza del suo genitore (la <body>) semplicemente non c'è alcun margine da distribuire.

Un approccio alernative di margin: 0 auto; sarebbe impostare .btn-toolbar a inline-block e poi centrandola aggiungendo text-align: center; al suo blocco contenitore. È possibile applicare lo stesso concetto per il secondo esempio:

http://fiddle.jshell.net/52VtD/94/

fonte

2013-09-26 23:11:50 Adrift

Grazie funziona benissimo per il pulsante, ma ho una domanda con l'elenco. Com'è possibile avere lo stesso risultato ma senza il testo centrato :) http://fiddle.jshell.net/52VtD/99/ –

In questo caso, margin:0 auto non funziona perché la larghezza dell'elemento è 100%. Se si desidera lavorare, si dovrà impostare una larghezza sull'elemento:

.btn-toolbar { 
    width: 50px; 
    margin: 0px auto; 
}

Se si vuole centrare il testo e il pulsante, è possibile aggiungere la classe text-center all'elemento genitore, in questo caso : .row. Lo stile di questa classe è semplicemente text-align: center.

<div class="row text-center"> 
    .. 
</div>

EXAMPLE HERE

Come @Adrift sottolinea, sarebbe molto più efficiente per centrare l'elemento rendendolo inline-block, come si può usare text-align:center al contrario di margin:0 auto ed evitare di dover impostare una larghezza fissa sull'elemento Ciò assicurerà che l'elemento sia centrato indipendentemente dalla sua larghezza. (example here) - non dimenticare che puoi semplicemente aggiungere la classe text-center al genitore per il centraggio.

Vale anche la pena notare che gli elementi inline/inline-block rispettano lo spazio bianco nel markup e quindi generano spazio se presenti. Se si desidera rimuovere questo spazio, vedere this answer.

fonte

2013-09-26 23:11:43

Come suggerisce, ho seguito la soluzione di @Adrift, ma vi ringrazio per le spiegazioni;) –

Impossibile centrare div il bootstrap 3

risposta

Problemi correlati