在自举轮播中垂直对齐图像 [英] Vertically align image inside a bootstrap carousel

问题描述

我正在尝试编写第一个网站的代码，所以我必须构建一个轮播。问题是我有一个较小的图片（400x400），我试图将其垂直对齐到轮播中，并在右侧添加一些文字。我试过在转盘上使用 position：relative; 在div上使用 absolute 在div上使用图像+

I'm trying to code my first website and I have to build a carousel. The thing is I have a smaller image (400x400) that I'm trying to vertically align it into the carousel and some text to the right. I tried with the position: relative; on the carousel and absolute on the div with the image +

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

不起作用。我想是因为旁边有轮播字幕。

doesn't work. I think because of the carousel caption that is next to it..

这里是现在的样子，没有上面我提到的对齐方式

Here's what is looking right now without the aligning I mentioned above

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

推荐答案

尝试一下，看看是否帮助：

Try this and see if it helps:

首先使您成为 .item 相对位置，并将其高度设置为100％，以便占用与容器相同的高度 .carousel-inner

First make you .item position relative and give it a height of 100% so it takes up the same height as the container .carousel-inner

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

然后接下来将您的绝对排名样式添加回您的 .carousel-img 元素

Then next add you absolute position styles back to your .carousel-img element

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

请参阅此小提琴为例。

我还注意到，轮播和轮播上的静态高度（550像素） -img（400px），因此您只需将 margin-top：75px; 添加到您的 .carousel-img

Also I noticed that you have static heights on your carousel (550px) and on your carousel-img (400px) so you could just add margin-top:75px; to your .carousel-img

请参阅此小提琴。

这篇关于在自举轮播中垂直对齐图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！