图像轮播中的项目对齐

Question

我正在使用Owl Carousel响应滑块,我正在试图弄清楚如何在主容器中定位图像和标题元素.我在这里设置了一个测试页面,我附上了一个模型指南.理想情况下,我想为容器元素设置最大/最小高度,将<p>标题固定到容器的左下角,并将图像垂直对齐到滑块的中间.

这可以通过基本的CSS吗？感谢您的任何指导.

Answer 1

将其添加到您的css文件中:

div.owl-item > div {
display:table-cell;
vertical-align:middle;
}

并将其添加到您的JS文件(或头标记之间)以获取动态w/h:

$(window).load(function() {

var maxH = 0;
var maxW = 0;
$('img','div.owl-item > div').each(function(f) {
if ($(this).height() > maxH) { maxH = $(this).height() };
if ($(this).width() > maxW) { maxW = $(this).width() };
});
$('div.owl-item > div')
.height(maxH)
.width(maxW);


});