我试图扩展默认的Bootstrap图像轮播,以支持动态大小的图像(最大500×400),以水平和垂直为中心.此外,我想保留原始的字幕布局,它将标题放在图像的底部,标题div完全覆盖图像(但不再进一步).
我已经放置了一个小提琴,这是一个相当干净的默认Bootstrap设置(在css部分末尾只有4种附加样式)：
http://jsfiddle.net/rdugan/JFBFU/26/
我可以通过在图像和标题周围添加周围的“内联”div,并使用父文本的“text-align：center”,来相当容易地完成水平居中和标题要求.然而,垂直居中仍然是一个问题(一如既往)
作为替代方案,我也尝试在不同的div上使用“display：table-cell”(以及相应的定中心样式),其结果不尽相同 – 在某些情况下,我会弄乱轮播功能,而在其他的情况下,我完成了图像对中,但失去标题锚定.
任何暗示都将不胜感激 – 一直在这个时候一直冲击着我的头脑.
解决方法
您可以按照以下规则水平居中：
.carousel-inner { text-align: center; }
.carousel .item > img { display: inline-block; }
对于垂直对齐,您应该查看以下内容：
http://www.student.oulu.fi/~laurirai/www/css/middle/
并且为了保持调整大小的图像宽高比,您只需要更改图像的宽度或仅高度,而不是一次更改图像长宽比,并且将以其原始比例调整大小.
