Bootstrap 5 carousel - how to vertically center text inside items

HTML & CSS
1

I’ve got a bs5 carrousel with a background image for each carousel item. Each item has a fixed height.
I’m having trouble vertically and centering the content inside the carousel item. I played around with ```
aligns-items-center justify-content-center but then it was adding both h tags on the same line.

below is what I have now… also here his a codepen Codepen

<style type="text/css">

  .carousel-hero, .carousel-inner{
    height: 600px;
  }
.carousel-hero .carousel-item{
    padding:50px;
    height: 600px;
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
  }

</style>
<section class="hero carousel-hero">
  <div id="homeHerocarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#homeHerocarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#homeHerocarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#homeHerocarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>

    <div class="carousel-inner h-100">
        
        <div class="carousel-item active " style="background-image: url('https://photo941.com/assets/img/hero-2.jpg');">
          <div class="row">
            <div class="my-auto text-center ">
             <h1 class="hero-headline white text-center">Item 1</h1>
             <h3 class="hero-subhead white text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h3>
            </div>
           </div><!-- close row -->
        </div> <!-- close item -->

        <div class="carousel-item " style="background-image: url('https://photo941.com/assets/img/hero-1.jpg')">
          <div class="my-auto text-center ">
            <h1 class="hero-headline white text-center">Item 2</h1>
            <h3 class="hero-subhead white text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h3>
         </div>
        </div> <!-- close item -->

        <div class="carousel-item " style="background-image: url('https://photo941.com/assets/img/hero-3.jpg')">
          <div class="my-auto text-center ">
            <h1 class="hero-headline white text-center">Item 3</h1>
            <h3 class="hero-subhead white text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h3>
         </div>
        </div> <!-- close item -->

      </div> <!-- close inner -->
    
      <button class="carousel-control-prev" type="button" data-bs-target="#homeHerocarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#homeHerocarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>  

  </section>

I don’t know why I can’t get my head around centering w flex

2

You have a different structure on those carousel items as in one you have .row and the others have different classes?

I changed the html to this:

<section class="hero carousel-hero">
  <div id="homeHerocarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#homeHerocarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#homeHerocarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#homeHerocarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>

    <div class="carousel-inner h-100">

      <div class="carousel-item active " style="background-image: url('https://photo941.com/assets/img/hero-2.jpg');">

        <div class="text-center">
          <h1 class="hero-headline white text-center">Item 1</h1>
          <h3 class="hero-subhead white text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h3>
        </div>

      </div> <!-- close item -->

      <div class="carousel-item " style="background-image: url('https://photo941.com/assets/img/hero-1.jpg')">
        <div class="text-center">
          <h1 class="hero-headline white text-center">Item 2</h1>
          <h3 class="hero-subhead white text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h3>
        </div>
      </div> <!-- close item -->

      <div class="carousel-item " style="background-image: url('https://photo941.com/assets/img/hero-3.jpg')">
        <div class="text-center ">
          <h1 class="hero-headline white text-center">Item 3</h1>
          <h3 class="hero-subhead white text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</h3>
        </div>
      </div> <!-- close item -->

    </div> <!-- close inner -->

    <button class="carousel-control-prev" type="button" data-bs-target="#homeHerocarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#homeHerocarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

</section>

Then added this CSS and it is now centred.

.carousel-item > div {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.