Ich versuche, das Standard-Bootstrap-Image-Karussell so zu erweitern, dass es Images mit dynamischer Größe (maximal 500 x 400) unterstützt, die sowohl horizontal als auch vertikal zentriert sind. Darüber hinaus möchte ich das ursprüngliche Layout der Beschriftung beibehalten, das die Beschriftung am unteren Rand des Bildes verankert, wobei sich die Beschriftungsdiv vollständig über das Bild erstreckt (jedoch nicht weiter).

Ich habe eine Geige zusammengestellt, die eine ziemlich saubere Implementierung des Standard-Bootstrap-Setups ist (es gibt nur 4 zusätzliche Stile am Ende des CSS-Abschnitts):

http://jsfiddle.net/rdugan/JFBFU/26/

Ich kann die Anforderungen an die horizontale Zentrierung und Beschriftung ziemlich einfach erfüllen, indem ich ein umlaufendes "Inline" -Div um das Bild und die Beschriftung füge und "text-align: center" auf dem übergeordneten Element verwende. Die vertikale Zentrierung bleibt jedoch (wie immer) ein Problem.

Als Alternative habe ich auch versucht, 'display: table-cell' (und die zugehörigen Zentrierungsstile) für verschiedene Divs mit unterschiedlichen Ergebnissen zu verwenden - in einigen Fällen störe ich die Karussellfunktionalität, während ich in anderen Fällen die Bildzentrierung durchführe. aber verlieren Sie die Titelverankerung.

Irgendwelche Hinweise wären sehr dankbar - ich habe mich schon eine ganze Weile damit beschäftigt.