Html 垂直对齐引导转盘内的图像

我正试图编写我的第一个网站，我必须建立一个旋转木马。问题是，我有一个较小的图像（400x400），我正试图垂直对齐到旋转木马和一些文本的权利。我尝试了

位置：relative和带有图像的div上的
绝对值

top:50%；
转化：translateY（-50%）；

不起作用。我想是因为它旁边的旋转木马标题

这是我在上面提到的没有对齐的情况下现在看到的


以下是HTML：

<!-- Start Carousel -->
    <div id="product-detail carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class="container">
            <div class="carousel-img"></div>
            <div class="carousel-caption">
              <p class="cat-title">Mercury</p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        ...
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left control-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right control-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

<!-- End Carousel -->

试试这个，看看是否有帮助：

首先，将您的
.item
定位为相对位置，并将其高度设置为100%，使其与容器的高度相同
.carousel inner

.item{
    position: relative;
    height:100%;
}

然后接下来将绝对位置样式添加回
.carousel img
元素

.carousel-img {
    ...
    position: absolute;   
    top: 50%;
    transform: translateY(-50%);
}

看看这个例子

我还注意到，您的旋转木马（550px）和旋转木马img（400px）上有静态高度，因此您可以添加
边距顶部：75px到您的
.carousel img

看看这个。
效果很好！非常感谢。我得到了正确的图像，但是现在我的标题有问题。。它跨越了整个容器，但我要做的是把图像放在左边，把一些文本放在右边。。下面是它的外观->有什么建议吗？
.carousel-img {
    ...
    position: absolute;   
    top: 50%;
    transform: translateY(-50%);
}