Eddy Eddy - 1 year ago 69
CSS Question

Cant align images vertically on carousel

I have this web site www.acigaiabeta.esy.es, that im trying to align the images of the carousel to the center vertically, but it´s always stuck to the top.
I even tryed to folow this tip How to vertically align an image inside div, but still didnt change place.
On big images theres is no big deal, but with small images there is a problem, and the images sizes are random.
what am i missing?

.carousel .item {

vertical-align: middle;
height: 500px;
background-color: #777;
.carousel-inner > .item > img {
vertical-align: middle;
max-width: 100%;
height: auto;
margin: auto;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;


Im only trying by css i tryed using the top, the vertical-align: middle like on the like showed above nothing works.

Answer Source

Here's the CSS you need:

#myCarousel img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);