Allinea orizzontalmente le miniature al centro

Question

Di seguito è riportato il codice che sto utilizzando nel mio html con twitter-bootstrap. Sto cercando di centrare l'allineamento dell'output, ma l'immagine è allineata a sinistra, indipendentemente da ciò che faccio.

<ul class="thumbnails"> 
    <li class="span5"> 
    <a href="#" class="thumbnail"><img src="img.jpg" /></a> 
    </li> 
</ul> 

Qualsiasi soluzione semplice?

Answer 1

miniature Twitter bootstrap sono galleggiare a sinistra per impostazione predefinita, è necessario sovrascrivere il comportamento sul proprio foglio di stile, al fine di renderli centro allineare il suo contenitore con le proprietà text-align:center e display:inline-block. Prova questo:

CSS

.thumbnails { 
    text-align:center; 
} 

.thumbnails > li { 
    display: inline-block; 
    *display:inline; /* ie7 fix */ 
    float: none; /* this is the part that makes it work */ 
} 

In questo modo le immagini thumbail si concentreranno all'interno del contenitore .thumbnails. Sostituire la classe .thumbnail con il contenitore si desidera centrare le immagini in

Answer 2

Se si utilizza text-align: center; e dare il vostro centro imgdisplay: inline-block; dovrebbe diventare allineato.

See: http://jsfiddle.net/HWMZg/

Answer 3

Ho trovato questo funziona più semplice per Bootstrap:.

.thumbnails > li { 
    float: right; 
    margin-bottom: 18px; 
    margin-left: 20px; 
} 

Ho semplicemente cambiato "galleggiare" da "sinistra" a "destra"

Answer 4

Creare una nuova riga per l'immagine. Utilizzare l'offset a seconda delle dimensioni della vostra immagine ad esempio appropriato:

<div class="span8 offset2" > 

Answer 5

questo è semplice basta aggiungere:

<div class="thumbnail" style="margin:0px auto;">whatever image tag here ...</div> 

Spero che questo è stato utile