Question

我正在尝试在自举轮播中使用图像，就像文本中的文字一样，如左侧图像中中间一个标题和右侧第二个标题中的文本。需要：

但是当我在自举传送带上尝试时，图像从传送带主体上掉下来。我所做的是，我为轮播分配了500px的高度，然后将其放置在绝对定位的中心，然后将轮播定位

.carousel{
  position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 50%;
     height: 30%;
     margin: auto;
}

它可以很好地处理文本，但是当我添加图像时，它再次改变了它的位置并向下移动了frame.as，如图所示，我得到了什么：

我要备份它

我的html代码是

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="js/bootstrap/bootstrap.js"></script>
  <!--  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900" rel="stylesheet">-->
  </head>
  <body>
<div class="container-fluid">
  <div class="row header flex-container">
    <div class="sidebar-header">

    </div>
    <div class="main-bg">
      <div class="row">
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
                    <li class="get-quote"><a href="#">Get quote</a></li>
          </ul>
        </nav>
      </div>
      <div class="row">
        <div class="main-slider">
          <div class="container-fluid">

            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active">01</li>
                <li data-target="#myCarousel" data-slide-to="1">02</li>
                <li data-target="#myCarousel" data-slide-to="2">03</li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                  <img class="slider-height" src="img/bag.png">
                </div>


              </div>

              <!-- Left and right controls -->

            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>

  </body>
</html>

我的CSS是

.main-slider{
  height: 500px;
  text-align: center;

position: relative;
  max-height: 100%;
  background-color: #FFD731;
}
.carousel{
  position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 50%;
     height: 30%;
     margin: auto;
}
.carousel-indicators {
    position: absolute;

    left: 150%;
    z-index: 15;

    text-align: center;
    list-style: none;
}
.carousel-indicators li {
    display:block;
    width: 10px;
    height: 10px;
    margin: 10px;
    text-indent:0px;
    cursor: pointer;
    background-color: #000 \9;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: none;
}
.carousel-indicators .active {
    width: inherit;
    height: inherit;
    margin: inherit;
    background-color:transparent;
}

Answer 1

我不知道它是否是示例代码的一部分，是否还删除了其他幻灯片，但是您有三个指示器，但只有一个幻灯片。那会造成一些麻烦。因此，我将从替换此内容开始：

<div class="item active">
  <img class="slider-height" src="img/bag.png">
</div>
<div class="item">
  <img class="slider-height" src="img/ANOTHER-IMAGE.png">
</div>
<div class="item">
  <img class="slider-height" src="img/A-THIRD-IMAGE.png">
</div>

只是为了避免在尝试解决其他问题时遇到这种奇怪的行为。

您实际问题的解决方案

这是将图像放置在item的中心。嗯...等一下！ item不应该是carousel-item（ref）吗？否则样式可能会混乱？

无论如何，我都会添加此CSS来解决它：

.item, 
.carousel-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

它使用Flexbox将图像定位在图像的中心。

希望我能正确理解您的问题。

在幻灯片上使用背景以外的boostrap轮播中的图片

1 个答案:

您实际问题的解决方案