Bilder im Slider zentrieren

[fmbcf]

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:

<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

[derRenner]

Hallo,

setz das margin:auto; auf das img

.image_container img { margin: auto; }

[fmbcf]

Hallo,
setz das margin:auto; auf das img

.image_container img { margin: auto; }

Danke für den Tip, aber leider: Keine Wirkung. Bilder bleiben links.

[derRenner]

mmmh - komisch
hast du nen Link für uns?

[andreasisaak]

margin: 0 auto funktioniert nur wenn du vorher das bild zu einem block element gemacht hast

[fmbcf]

margin: 0 auto funktioniert nur wenn du vorher das bild zu einem block element gemacht hast

Yeahh, das war's. Danke!

[fmbcf]

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?

Hat noch jemand eine kurze Antwort auf a) für mich?
Danke!

[andreasisaak]

Nein du musst (soweit ich weiß) für jedes Bild ein Inhaltselement anlegen.

[anek]

margin: 0 auto funktioniert nur wenn du vorher das bild zu einem block element gemacht hast

Das funktioniert auch noch in Contao 5, danke