i have here carousel working good using HTML BOOTSTRAP.. i wanted to add logo as small centered images over the carousel images and make them responsive on other devices, also i tried to add button under logo here and show centered as well... but in below code its not working as expected

.carousel-caption {
    top: 20px !important;
    right: 20px !important;
}
.carousel-caption {
  position: absolute !important;
  top: 50% !important;
  /* left: 50% !important;
  transform: translate( -50%, -50%) !important; */
  text-align: center !important;
  color: white !important;
  margin: auto;
  font-weight: bold !important;
  max-width: 500px !important;
  background-repeat: no-repeat !important;
}

.carousel-caption img {
  max-width: 150px !important;
}

<div >

        <div id="carouselExampleIndicators"  data-ride="carousel">
        
            <ol >
                <li data-target="#carouselExampleIndicators" data-slide-to="0" ></li>

            </ol>

            <div >
                <div >
                    <img  src="assets/images/dgWebsiteImages26.jpg" 
                        alt="First Image">

                        <div >
                         
                                <img  src="assets/images/logo---27.png" style="background-repeat: no-repeat;"
                        alt="First Image">
                        <a  href="https://">A Button</a>
                      
                            
                        </div>

                </div>
        
            </div>
    
            <a  href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span  aria-hidden="true"></span>
                <span >Previous</span>
            </a>
            <a  href="#carouselExampleIndicators" role="button" data-slide="next">
                <span  aria-hidden="true"></span>
                <span >Next</span>
            </a>
        </div> 
    

    </div>

CodePudding user response：

I think this is what you want? I made the VW logo a bit smaller to make it easier to see in the code snippet. Make sure that whenever you want to position an position absolute element within another element, that the parent of said absolute element has position relative. Also, the carousel-item was width: 100% even though the image wasn't, so after adding a width: fit-content it worked as expected. If you want to position it in one of the corners such as bottom, right change the following:

.carousel-caption {
    top: 20px;
    right: 20px;
}

.carousel-item {
  position: relative;
  width: fit-content;
}

.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50%);
  text-align: center;
  color: white;
  font-weight: bold;
  background-repeat: no-repeat;
}

.carousel-caption-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  width: 40px;
}

.carousel-caption img {
  max-width: 50px;
}

<div >

  <div id="carouselExampleIndicators"  data-ride="carousel">

    <ol >
      <li data-target="#carouselExampleIndicators" data-slide-to="0" ></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
    </ol>

    <div >
      <div >
        <img  src="https://images.unsplash.com/photo-1504736038806-94bd1115084e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=3d045bbf1ecc01c4c9ec011ce5c8977d" alt="First Image">

        <div >
        <div >
          <img  src="https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80" style="background-repeat: no-repeat;" alt="First Image">
          <button>test</button>
          </div>
        </div>

      </div>
    </div>

    <a  href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span  aria-hidden="true"></span>
      <span >Previous</span>
    </a>
    <a  href="#carouselExampleIndicators" role="button" data-slide="next">
      <span  aria-hidden="true"></span>
      <span >Next</span>
    </a>
  </div> -->



</div>