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

I took the documentation from Bootstrap and everything works fine, but I need the logo to be in the center of the carousel, even when the image changes. I've tried with relative parent but it seems like something is off.

<div >
        <div >
            <div >
                <div id="carouselExampleSlidesOnly"  data-bs-ride="carousel">
                    <div >
                        <div >
                            <img src="/images/section1/home-image.jpg"  alt="...">
                        </div>
                        <div >
                            <img src="/images/section1/home-img-2.jpg"  alt="...">
                        </div>
                    </div>
                    <div >
                        <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;
}

CodePudding user response：

So if I understood your issue correctly then you only need to use display:flex and center the logo both vertically and horizontally. So here is your code

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <div >
    <div >
      <div >
        <div id="carouselExampleSlidesOnly"  data-bs-ride="carousel">
          <div >
            <div >
              <img src="/images/section1/home-image.jpg"  alt="...">
            </div>
            <div >
              <img src="/images/section1/home-img-2.jpg"  alt="...">
            </div>
          </div>
          <div >
            <img src="/images/section1/home-logo.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

I hope this solves your issue. Please run the code on your system because image is missing here.