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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gibt es zwei Lösungen für dieses, ist, wenn Sie möchten, dass Ihre Bilder werden zentriert und das andere ist, wenn Sie Ihre Bilder sollen Linksbündig, sondern zentriert auf der Seite.
Center block, Links, Bilder ausrichten,
Um dies zu tun, müssen Sie fügen den folgenden Code in den css (oder: http://jsfiddle.net/HvZva/20/)
was ich Tue, ist im Grunde, um dem browser mitzuteilen, dass das un-geordnete Liste sollten die gleiche Marge auf beiden Seiten. Aber da dieses Objekt hat eine Breite von 100% als standard, müssen wir angeben, dass aswell, und in diesem Fall ist es 416px.
Center align images
Wenn dies statische Inhalte, eine einfache Möglichkeit, dies zu tun ist, fügen Sie ein div mit der Klasse center, wickelt jede Zeile, und klicken hinzufügen "text-align:center;" zu den divs, das wird den trick tun.
Hinweis: es gibt eine neue Art, um die Mitte der block, aber die Ausrichtung der Bilder auf der linken Seite. aber das mit der box-flex-Modell und css 3 und es wurde noch nicht umgesetzt, von den Browsern noch
Anwendung
text-align: center;
zu .Daumen.noscript-ul-fixes, die es im jsfiddleSo etwas? http://jsfiddle.net/HvZva/11/
Ich kann mis interpreded Ihre Frage, aber ist es so etwas wie dieses, die Sie wollen?
http://jsfiddle.net/HvZva/12/
Können Sie geben das Eltern-element eine Breite und anwenden
margin-left: auto; margin-right: auto;
http://jsfiddle.net/HvZva/13/