Merkezdeki ufak çizgileri yatay olarak hizalayın

Question

Aşağıda, twitter-bootstrap ile htmlimde kullanıyorum kod yer almaktadır. Çıktının hizalanmasını ortalamaya çalışıyorum ama ne yaparsam yapayım sola hizalı.

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

Herhangi bir basit çözüm?

Answer 1

Heyecan önyükleme küçük resimler varsayılan olarak sola süzülüyor, sen onları text-align:center ve display:inline-block özelliklere sahip olan konteyner hizaya ortalamak yapmak için kendi stil sayfalarına davranışı üzerine yazmak zorunda. Bu deneyin:

CSS

.thumbnails { 
    text-align:center; 
} 

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

Minyatür resim görüntüleri .thumbnails kabın içine ortalamak Bu şekilde. Eğer resimlerinizi ortalamak istiyorum konteyner ile .thumbnail sınıf değiştirin

Answer 2

text-align: center; kullanırsanız ve imgdisplay: inline-block; numaralı kitabı verirseniz, merkez hizalanmış hale gelmelidir.

Bkz: http://jsfiddle.net/HWMZg/

Answer 3

Bu Bootstrap için en kolay çalışır bulundu. Ben sadece "hakkı"

"sol" dan "şamandıra" olarak değiştirildi

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

Answer 4

Görüntü için yeni bir satır oluşturun. Resim ör boyutuna bağlı olarak ofset uygun düzgün kullanın:

<div class="span8 offset2" > 

Answer 5

Bu sadece basit eklemek edilir: Bu yardımcı