如何将图像置于 Bootstrap 5 旋转木马的中央？

Question

我从 Bootstrap 获取了文档并且一切正常，但我需要徽标位于旋转木马的中央，即使图像发生变化也是如此。我试过使用 relative parent，但似乎有些地方不对。

<div class="container-fluid g-5">
        <div class="row">
            <div class="col-12">
                <div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="/images/section1/home-image.jpg" class="d-block img-fluid w-100" alt="...">
                        </div>
                        <div class="carousel-item">
                            <img src="/images/section1/home-img-2.jpg" class="d-block img-fluid w-100" alt="...">
                        </div>
                    </div>
                    <div class="logo">
                        <img src="/images/section1/home-logo.png" alt="">
                    </div
                </div>
            </div>
        </div>
    </div>


#section .container-fluid{
position: relative;
width: 100%;
height: 85vh;
z-index: 0;
}

#section .logo{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

Answer 1

因此，如果我对您的问题的理解正确，那么您只需使用 display:flex 并将徽标在垂直和水平方向上居中。所以这是你的代码

.carousel {
  position: relative; //.logo is inside .carousel
}

.logo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <div class="container-fluid g-5">
    <div class="row">
      <div class="col-12">
        <div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="/images/section1/home-image.jpg" class="d-block img-fluid w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="/images/section1/home-img-2.jpg" class="d-block img-fluid w-100" alt="...">
            </div>
          </div>
          <div class="logo">
            <img src="/images/section1/home-logo.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

希望这能解决您的问题。请运行系统上的代码，因为此处缺少图像。

如何将图像置于 Bootstrap 5 旋转木马的中央？

How can I center an image over a Bootstrap 5 Carousel?

html

css

bootstrap-5