0

Hello 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;
  top: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.

Community
  • 1
  • 1
Eddy
  • 15
  • 1
  • 5

2 Answers2

0

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%);
}
tao
  • 82,996
  • 16
  • 114
  • 150
  • Perfect, exacly what i need ty so mutch for the help. it worked exacly how i wanted :) – Eddy Sep 25 '16 at 17:32
0

Try it.

.first-slide {
  position: abolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
FightInGlory
  • 448
  • 2
  • 6
  • just did still nothing :( what made it move was if it was position fixed, but it will act for all page and not only inside div :( – Eddy Sep 25 '16 at 17:30
  • Have you tested your answer before posting it? Welcome to SO. Please take some time to read on [how to answer](http://stackoverflow.com/help/how-to-answer). – tao Sep 25 '16 at 17:35