無法在旋轉木馬上垂直對齊圖像

Question

你好 我有這個網站www.acigaiabeta.esy.es，即時通訊試圖將旋轉木馬的圖像垂直對齊到中心，但它始終堅持頂端。 我甚至試圖遵循這個提示How to vertically align an image inside div，但仍沒有改變的地方。 在大的圖像上theres沒有什麼大不了的，但小圖像有問題，圖像大小是隨機的。 我在想什麼？

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

} 

我只試圖通過CSS我嘗試使用頂部，垂直對齊：像上面的中間顯示上面沒有任何作品。

Answer 1

這裏有您需要的CSS：

#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%); 
} 

Answer 2

試試吧。

.first-slide { 
 
    position: abolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
}