Horizontal ausrichten thumbnails in der Mitte
Folgenden ist der code, den ich verwende in meinem html auch mit twitter-bootstrap. Ich versuche, mich zu zentrieren, ausrichten der Ausgabe, aber das Bild ist Linksbündig, egal was ich mache.
<ul class="thumbnails">
<li class="span5">
<a href="#" class="thumbnail"><img src="img.jpg" /></a>
</li>
</ul>
Irgendeine einfache Lösung?
text-align: center
auf die li
schon versucht, keine Wirkung! ;(
Es sei denn, die
li
s sind display: inline
oder die img
s sind display: block
funktionieren sollte. Könnten Sie zeigen die Website/code?ja das Bild ist display: block. die Website ist derzeit offline, so lässt sich nicht zeigen. aber hier ist der screenshot von der front-end-code vom firebug.. freeimagehosting.net/um4qj
Block-Elemente können zentriert werden, indem Sie Ihre linken und rechten Ränder auf
auto
. Oder Sie können einfach ändern Sie Sie, um inline
.InformationsquelleAutor Sushil | 2012-04-11
Du musst angemeldet sein, um einen Kommentar abzugeben.
Twitter bootstrap thumbnails schwebte auf der linken Seite standardmäßig haben Sie zu überschreiben, dass das Verhalten auf einem eigenen stylesheet, um Sie center richten Sie Ihre container mit der
text-align:center
unddisplay:inline-block
Eigenschaften. Versuchen Sie dies:CSS
Diese Weise der thumbail-Bilder-center in der
.thumbnails
container. Ersetzen Sie die.thumbnail
Klasse mit dem Behälter, den Sie zentrieren möchten Sie Ihre Bilder in.Man nennt Sie die Kind-Selektor und wird benutzt, um nur wählen Sie alle Kinder eines Elements, im Gegensatz zu allen passenden Elementen innerhalb. In diesem Fall, es wird verwendet, um die erste Ebene (Kinder) Listeneinträge der
.thumbnails
container.InformationsquelleAutor Andres Ilich
Wenn Sie
text-align: center;
und geben Sie Ihremimg
display: inline-block;
sollte es zentriert ausgerichtet.Finden Sie unter: http://jsfiddle.net/HWMZg/
InformationsquelleAutor markvandencorput
Dies ist einfach nur hinzufügen:
Ich hoffe, das war hilfreich
InformationsquelleAutor jfindley
Ich fand, das funktioniert am einfachsten für Bootstrap:
Ich einfach geändert, "float" von "Links" bis "rechts"
InformationsquelleAutor jstreebin
Erstellen Sie eine neue Zeile für das Bild. Verwenden Sie den entsprechenden offset abhängig von der Größe des Bildes z.B.:
InformationsquelleAutor Eric