我正在尝试扩展默认的 Bootstrap 图像轮播以支持动态大小的图像(最大 500x400),水平和垂直居中。此外,我想保持原始的标题布局,它将标题锚定到图像的底部,标题 div 完全延伸到图像上(但没有更多。)
我整理了一个小提琴,这是默认 Bootstrap 设置的一个相当干净的实现(在 css 部分的末尾只有 4 个额外的样式):
http://jsfiddle.net/rdugan/JFBFU/26/
通过在图像和标题周围添加一个环绕的“内联”div,并在父级上使用“文本对齐:中心”,我可以相当轻松地完成水平居中和标题要求。但是,垂直居中仍然是一个问题(一如既往。)
作为替代方案,我还尝试在不同的 div 上使用 'display: table-cell' (以及随附的居中样式),结果各不相同 - 在某些情况下,我搞砸了轮播功能,而在其他情况下,我完成了图像居中,但失去了标题锚定。
任何提示将不胜感激 - 很长一段时间以来一直在努力解决这个问题。