How do you center an Image in a Carousel

How do you center an Image in a Carousel?

<div class="container"><br />  
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol>
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          <li data-target="#myCarousel" data-slide-to="3"></li>
          <li data-target="#myCarousel" data-slide-to="4"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">

          <div class="item active">
            <img src="Pictures/Balmoral_Castle.jpg" alt="Balmoral Castle" width="460" height="345" />
            <div class="carousel-caption">
              <h3>Balmoral Castle</h3>
            </div>
          </div>

          <div class="item">
            <img src="Pictures/Neuschwanstein_Castle.jpg" alt="Castle Neuschwanstein" width="460" height="345" />
            <div class="carousel-caption">
              <h3>Castle Neuschwanstein</h3>
            </div>
          </div>

          <div class="item">
            <img src="Pictures/french-castles.jpg" alt="french castles" width="460" height="345" />
            <div class="carousel-caption">
              <h3>french-castles</h3>
            </div>
          </div>

          <div class="item">
            <img src="Pictures/Arundel_Castle.jpg" alt="Arundel Castle" width="460" height="345" />
            <div class="carousel-caption">
              <h3>Arundel Castle</h3>
            </div>
          </div>

          <div class="item">
            <img src="Pictures/Bojnice_castle.jpg" alt="Bojnice Castle" width="460" height="345" />
            <div class="carousel-caption">
              <h3>Bojnice Castle</h3>
            </div>
          </div>

          <div class="item">
            <img src="Pictures/heidelberg castle.jpg" alt="Heidelberg Castle" width="460" height="345" />
            <div class="carousel-caption">
              <h3>Heidelberg Castle</h3>
            </div>
          </div>

        </div>

        <!-- Left and right controls -->
        <a href="#myCarousel">
          <span></span>
          <span>Previous</span>
        </a>
        <a href="#myCarousel">
          <span></span>
          <span>Next</span>
        </a>
      </div>
    </div>

You need to add some CSS

if you want to just center the image

.carousel-inner > .item > img{ margin:auto; }

if you want to have the image full size inside of the carousel add width .carousel-inner > .item > img{ margin:auto; width:100% }

hope it helps.

How do you show in C# or VB when an image cycles?

<div class="container"><br />  
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol>
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          <li data-target="#myCarousel" data-slide-to="3"></li>
          <li data-target="#myCarousel" data-slide-to="4"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">

          <div class="item active">
            <img src="Pictures/Balmoral_Castle.jpg" alt="Balmoral Castle" width="460" height="345" />
            <div class="carousel-caption">
              <h3>Balmoral Castle</h3>
            </div>
          </div>

          <div class="item">
            <img src="Pictures/Neuschwanstein_Castle.jpg" alt="Castle Neuschwanstein" width="460" height="345" />
            <div class="carousel-caption">
              <h3>Castle Neuschwanstein</h3>
            </div>
          </div>

          <div class="item">
            <img src="Pictures/french-castles.jpg" alt="french castles" width="460" height="345" />
            <div class="carousel-caption">
              <h3>french-castles</h3>
            </div>
          </div>

          <div class="item">
            <img src="Pictures/Arundel_Castle.jpg" alt="Arundel Castle" width="460" height="345" />
            <div class="carousel-caption">
              <h3>Arundel Castle</h3>
            </div>
          </div>

          <div class="item">
            <img src="Pictures/Bojnice_castle.jpg" alt="Bojnice Castle" width="460" height="345" />
            <div class="carousel-caption">
              <h3>Bojnice Castle</h3>
            </div>
          </div>

          <div class="item">
            <img src="Pictures/heidelberg castle.jpg" alt="Heidelberg Castle" width="460" height="345" />
            <div class="carousel-caption">
              <h3>Heidelberg Castle</h3>
            </div>
          </div>

        </div>

        <!-- Left and right controls -->
        <a href="#myCarousel">
          <span></span>
          <span>Previous</span>
        </a>
        <a href="#myCarousel">
          <span></span>
          <span>Next</span>
        </a>
      </div>
    </div>

hmmm, probably I am very dumb, just trying to figure this out, I tried but it didn’t work for me :frowning: I am a newbie, sorry. I am trying to do the simplest carousel that would work for a phone, I have to resize, so that it adapts to the screen size and shape the best but I just can’t make the images center, the carousel I can get it to scale the right way, always displaying the image, but when there is more space on the horizontally, it aligns to the left. I need it to be aligning it the center. Tried writing a CSS like you advised but maybe because the strange resizing it don’t work. I wonder if there is a workaround… I am using the stock BSS carousel. maybe there is a solution, anybody know? thanks!

success! the object-fit: contain; worked for me beautifully!

1 Like

I’ve just recently added 2 carousel’s from the default UI section of BSS and I didn’t have to do a thing to make them centered, it was automatic. Make sure you set your images to Responsive in the options panel. Should you need to go further with this check the Options panel while having the Carousel part of your component selected in the Overview panel. This will give you a ton more options to set on the carousel without having to do any extra coding or very little.

The app has had a lot of changes since 2017 which is when this thread was started and answered on the forums. Always best to check the options panel while selecting the main part of a component in the Overview panel to see if there are more options for that component before resorting to unnecessary code. :slight_smile: