将图像在Bootstrap滑块中水平和垂直居中

Question

首先，这是一个小提琴： http : //jsfiddle.net/3CW4D/

我有可能显示不同尺寸图像的Bootstrap滑块。 我要达到的目标是，它们的最大宽度均为570px，高度最大为379px。

我已经做到了

.carousel{
width: 570px;
height: 379px;
}

.img-big{
max-width: 570px;
max-height: 379px;
margin: 0 auto;
}

对于图像3，​​但滑块中的图像2卡在顶部，而不是垂直居中。

我如何做到这一点，以使它们居中，而不管它们是更高还是更宽？

Answer 1

尝试使用以下CSS（已编辑）：

.carousel .item{
    width: 570px;
    height: 379px;
}
.img-big{
    max-width: 570px;
    max-height: 379px;
    margin: 0 auto;
}
.align-to-middle {
    width: 570px;
    height: 379px;
    display:table-cell;
    vertical-align: middle;
}

并将图像.img-big包围在...周围，​​该图像将图像包裹并对齐到中间。

因此，您可以在此处查看完整的代码： http : //jsfiddle.net/3CW4D/2/