将图像水平和垂直居中放置在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/