Bilder im Slider zentrieren
Liebe Gemeinde,
ich habe den bei Contao eingebauten Standard-Content-Slider am Wickel (keine Erweiterung, keine Tricks und im Layout den Moo-Slider ausgewählt). Der funktioniert auch und slidet so vor sich, aber zwei Fragen bleiben offen:
a) Muss ich wirklich jedes Bild einzeln als Inhaltselement einfügen? Ich fände es hilfreicher, wenn ich nur ein Inhaltselement reinhängen müßte und dort ein Verzeichnis angeben könnte, aus dem dann alle Bilder nacheinander gezogen werden sollen. Oder habe ich bei der Bedienung was übersehen?
b) Meine Bilder sind unterschiedlich groß und werden auf einheitliche Höhe gescaled. Dadurch bekommen sie logischerweise unterschiedliche Breite. Nun würde ich die Bilder gerne zentriert anzeigen, aber leider sind sie linksbündig. Ich habe eine ganze Zeit lang ge-firebug-t. Die Codesequenz ist hier:
HTML-Code:
<div class="content-slider" data-config="4500,1500,0," style="visibility: visible;">
<div class="slider-wrapper" style="width: 2420px;">
<div class="ce_image block" style="width: 484px; left: 0px; transition-duration: 0ms; transform: translateX(-484px);" data-index="0">
<div class="ce_image block" style="width: 484px; left: -484px; transition-duration: 0ms; transform: translateX(0px);" data-index="1">
<figure class="image_container">
<a href="files/xyz-online.de/content/fotos/2012/Kultur/Kultur_2012.JPG" data-lightbox="72d2ef">
<img width="160" height="240" alt="" src="assets/images/f/Kultur_2012.JPG-7d25c43f.jpg">
</a>
</figure>
</div>
<div class="ce_image block" style="width: 484px; left: -968px; transition-duration: 0ms; transform: translateX(484px);" data-index="2">
<div class="ce_image block" style="width: 484px; left: -1452px; transition-duration: 0ms; transform: translateX(484px);" data-index="3">
<div class="ce_image block" style="width: 484px; left: -1936px; transition-duration: 0ms; transform: translateX(484px);" data-index="4">
</div>
Als CSS-newbie ging ich davon aus, dass ich das <a> in dem größeren <figure> zentrieren muss und habe dem <a> ein margin:auto; verpasst. Interessiert aber scheinbar nicht. Dass ich im CSS den richtigen Selektor erwischt habe, kann ich an einem roten Border erkennen, den ich gesetzt habe. Die Bilder reagieren, wenn ich dem <a> ein float:right; mitgebe, allerdings -o wunder- natürlich nicht mit Zentrierung, sondern mit Rechtsbündigkeit. Meine nächste Vermutung war dann float:none oder clear:both, jeweils mit margin:auto;
Funktioniert leider alles nicht. Was mache ich falsch?
PS: Ich habe hier im Form eine Google-Suche mit Slider Bilder zentrieren durchgeführt, aber nur speziellere Probleme und Lösungen gefunden.
Danke für einen Tip oder für einen Link auf die Lösung
Frank
