图像轮播中的项目对齐

Question

我正在使用Owl Carousel responsive slider，我试图弄清楚如何在主容器中定位图像和标题元素。我设置了一个测试页面here，并且我附加了一个模型指南。理想情况下，我想为容器元素设置最大/最小高度，将<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);


});

Answer 2

如果您希望图像的动态高度具有响应性，请使用jquery设置它的高度。

DEMO http://jsfiddle.net/nLJ79/

note:在调整结果框架大小后，再次点击“运行”按钮。

JQUERY

$(document).ready(function () {
    $("#owl").owlCarousel({
        navigation: true,
        singleItem: true
    });
    $('.owl-pagination .owl-page, .owl-buttons div').on('click',function(){
        $('.owl-item div').css('height',$('.owl-item div').css('height'));
    });
});