垂直對齊自舉輪播內的圖像

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。