2012-04-11 20 views
5

Im Folgenden ist der Code, den ich in meinem HTML mit Twitter-Bootstrap verwende. Ich versuche, die Ausgabe zu zentrieren, aber das Bild ist links ausgerichtet, egal was ich mache.Miniaturbilder in der Mitte horizontal ausrichten

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

Eine einfache Lösung?

+2

'text-align: center' auf die' li ' – powerbuoy

+1

schon versucht, dass, kein Effekt! ; ( – Sushil

+0

Es sei denn, die 'li' sind 'display: inline' oder die' img's 'display: block', die funktionieren sollten. Könnten Sie die Site/den Code anzeigen? – powerbuoy

Antwort

17

Twitter Bootstrap-Thumbnails nach links standardmäßig schwebte sind, müssen Sie dieses Verhalten auf Ihrem eigenen Stylesheet, um überschreiben, um sie seinen Behälter zu machen Zentriert mit den text-align:center und display:inline-block Eigenschaften. Versuchen Sie folgendes:

CSS

.thumbnails { 
    text-align:center; 
} 

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

diese Weise können die Mini-Ansicht Bilder im Inneren des .thumbnails Behälter zentriert wird. Ersetzen Sie die .thumbnail Klasse mit dem Container, den Sie Ihre Bilder in zentrieren möchten

+0

Woah woah woah, das ist das erste in meinem Leben Ich sehe das> Syntax in CSS. Was heißt das? –

+3

@Leonnears Es wird der [Kind-Selektor] (http://www.w3.org/TR/CSS2/selector.html#child-selectors) genannt und wird verwendet, um nur alle Kinder eines Elements im Gegensatz zu allen auszuwählen übereinstimmende Elemente innerhalb. In diesem Fall werden die Listenelemente der ersten Ebene (untergeordnete Elemente) des Containers ".thumbnails" ausgewählt. –

0

fand ich das funktioniert am einfachsten für Bootstrap.

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

ich einfach geändert „float“ von „links“ nach „rechts“

+0

ich fand das funktioniert: – jstreebin

0

Erstellen Sie eine neue Zeile für das Bild. Verwenden Sie den entsprechenden Versatz abhängig von der Größe des Bildes zB:

<div class="span8 offset2" > 
1

Das ist einfach nur noch hinzufügen:

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

Hoffnung, das war hilfreich

Verwandte Themen