html - 在 Bootstrap 轮播中垂直对齐图像

Question

我正在尝试编写我的第一个网站，我必须构建一个轮播。事情是我有一个较小的图像 (400x400)，我试图将它垂直对齐到轮播中，并在右侧放置一些文本。我尝试在旋转木马上使用 position: relative; 并在带有图像 +

的 div 上使用 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举个例子。

我还注意到您的 carousel (550px) 和 carousel-img (400px) 上有静态高度，因此您可以将 margin-top:75px; 添加到您的 。旋转木马 img

查看此 fiddle .