Center-inline-block-Bilder

Brauche ich etwas Hilfe Zentrierung einige Bilder

HTML:

<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<br>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>

CSS:

ul.thumbs {
    clear: both;
    padding-left: 0px;
}

ul.thumbs li {
    display: inline-block;
    /*float: left;*/
    padding: 0;
    margin: 5px 10px 5px 0;
    list-style: none;
}

a.thumb {
    padding: 2px;
    display: block;
    border: 1px solid #ccc;
}

ul.thumbs li.selected a.thumb {
    background: #DAA12F;
}

a.thumb:focus {
    outline: none;
}

ul.thumbs img {
    border: none;
    display: block;
    height: 120px;
    width: 120px;
    margin: 0px auto;
}

Ich brauche die Bilder in der Mitte zusammen, so dass Sie blieb aufgereiht. Ich habe versucht mit:

ul.thumbs {
    text-align:center;
} 

aber da gibt es eine unterschiedliche Anzahl von Bildern, die auf jede Zeile, die Sie verschieben aus der Ausrichtung

Danke für die Hilfe, das treibt mich verrückt

EDIT: ich dachte, ich fand eine Lösung, bei der diese als Leitfaden: http://www.tightcss.com/centering/center_variable_width.htm aber wenn die Bilder gehen über mehr als die Zeile, die Sie nicht mehr center. Ursprünglich legte ich ein br-tag, um brechen die Zeilen und, dass das problem behebt, aber eine JS-Bibliothek Im mit nicht spielen schön mit br-tags zwischen den Listenelementen. Irgendwelche Vorschläge (sehen Sie das Problem, hier http://jsfiddle.net/HvZva/26/)

  • Zentriert wie alle in einer geraden Linie nach unten? Oder in der Mitte der Seite, aber die linke der beiden Zeilen bündig? Können Sie zeigen ein Diagramm, wie Sie wollen, dass Sie aufgereiht sind?
  • Ist dies die Art von Sache, die Ihr nach? jsfiddle.net/HvZva/12
  • Vielen Dank für die schnellen Antworten, Ihre Lösungen auf dem richtigen Weg sind, aber ich hätte expliziter sein, die Lösung, die nicht hard-coded wie kann ich eine beliebige Anzahl von Bildern, die müssen ausgerichtet werden. Hier ist ein i.imgur.com/TCnWF.png Wie Sie sehen können, in beiden Beispielen, werden die Bilder als Gruppe zentriert sind, aber wenn es mehr als 1 Zeile, die Sie weiterhin zum line-up
  • Fand die Lösung mit diesem als Leitfaden: tightcss.com/centering/center_variable_width.htm meine Lösung gibts hier: jsfiddle.net/HvZva/23
  • Lösung nicht ganz funktioniert. Siehe edit oben
Schreibe einen Kommentar