垂直对齐自举轮播内的图像

Question

我试图编写我的第一个网站，我必须建立一个轮播。事情是我有一个较小的图像（400×400），我试图垂直对齐到旋转木马和一些文本的权利。我与position: relative;旋转木马和absolute试图在分度，图像+

top: 50%; 
transform: translateY(-50%); 

不起作用。我想是因为传送带标题是它旁边的..

这里是正在寻找现在没有我上面

提到的对位 - >http://i.imgur.com/LqoXWMo.png

这里的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 --> 

CSS我有一个转盘：

/************************* 
    CAROUSEL 
*************************/ 

.carousel .carousel-inner { 
    height: 550px; 
    margin-bottom: 100px; 
    background: #faf9f9; 
} 

.carousel-control.right, 
.carousel-control.left { 
    background-image: none; 
} 

.control-icon { 
    color: #393939; 
    text-shadow: none; 
} 

.carousel-inner { 
    position: relative; 
} 

.carousel-img { 
    width: 400px; 
    height: 400px; 
    background-image: url('../img/jewelery.jpg'); 
    background-size: cover; 
} 

.cat-title { 
    text-shadow: none; 
} 

Answer 1

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

首先要相对.item位置，你，并给它100％的高度，以便它占用相同的高度容器.carousel-inner

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

这时旁边加你绝对位置风格回你.carousel-img元素

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

一个例子来看看这个fiddle。

而且我注意到，你有静态的高度对你的旋转台（550px）和你的旋转木马IMG（400像素），所以你可以只添加margin-top:75px;您.carousel-img

看到这个fiddle。