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

无法在旋转木马上垂直对齐图像

2 个答案: