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

Question

First of all, here is a fiddle: http://jsfiddle.net/3CW4D/

I have the Bootstrap slider that may show different sized images. What I'm trying to achieve is that they are all at most 570px in width and 379px in height.

I've achieved this with

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

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

for image 3, but image 2 in the slider is stuck at the top instead of being centered vertically.

How do I achieve this so they are centered no matter if they are higher or wider?

Answer 1

Try to use the following css (your edited):

.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;
}

And surround the image .img-big by ... which wraps the image and aligns it to middle.

So the full code you could check here: http://jsfiddle.net/3CW4D/2/