javascript - How to center caption in Bootstrap 4 carousel? - Stack Overflow

admin管理员组

文章数量:1291037

I essentially copied the captioned carousel example from the Bootstrap 4 documentation: /

However, I cannot seem to achieve a carousel that only has text, where the text is centered...

Here is my code:

<script src=".1.1/jquery.min.js"></script>
<div id="carousel" class="carousel slide bg-chrome" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div data-slide-no="0" class="carousel-item item active">
      <div class="carousel-caption d-none d-md-block">
        <h1>My Carousel</h1>
        ...is not centered!
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous slide</span>
  </a>
  <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next slide</span>
  </a>
</div>

I essentially copied the captioned carousel example from the Bootstrap 4 documentation: https://v4-alpha.getbootstrap./ponents/carousel/

However, I cannot seem to achieve a carousel that only has text, where the text is centered...

Here is my code:

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel" class="carousel slide bg-chrome" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div data-slide-no="0" class="carousel-item item active">
      <div class="carousel-caption d-none d-md-block">
        <h1>My Carousel</h1>
        ...is not centered!
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous slide</span>
  </a>
  <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next slide</span>
  </a>
</div>

Aside from some minor styling, this is what the above code renders:

As you can see, the text is not centered! Per some other questions I found here on StackOverflow, I tried:

1. Setting .carousel-caption to have margin: 0 auto
2. Setting .carousel-caption to have position: relative
3. Setting .carousel-caption to have text-align: center
4. Wrapping each .carousel-item in a .container and styling to achieve a centered text

None of the solutions have worked, so I ask you all; how can I achieve a horizontally centered carousel with only captions?

Edit: JSFiddle

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jan 26, 2018 at 21:37 Niveditha Karmegam 74011 gold badge1212 silver badges2828 bronze badges asked Apr 5, 2017 at 1:04 KennyKenny 4,5721212 gold badges4040 silver badges6363 bronze badges 2

• Would you add a jsfiddle or codepen.io to your otherwise very thorough question? :-) – ryantdecker Commented Apr 5, 2017 at 1:07
• Updated my original post. – Kenny Commented Apr 5, 2017 at 1:12

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

As of BS alpha 6, the .carousel-item is display:flex; which limits some of the positioning you can do with the contents of carousel-item. This is a known issue: https://github./twbs/bootstrap/issues/21611

So, one option is to change the active .carousel-item is display:block;. Then you can simply use text-center to center the contents.

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
    display:block;
}

<div class="carousel-inner" role="listbox">
    <div class="carousel-item active text-center p-4">
        <h1>My Carousel</h1> ...is centered!
    </div>
    <div class="carousel-item text-center p-4">
        <h1>2 Carousel</h1> ...is centered!
    </div>
    <div class="carousel-item text-center p-4">
        <h1>3 Carousel</h1> ...is centered!
    </div>
</div>

http://www.codeply./go/ja3h44A7bQ

---

Another option is to simply use the flexbox utils, and change the direction to flex-column. Then align-items-center can be used...

      <div class="carousel-inner text-white" role="listbox">
            <div class="carousel-item active align-items-center flex-column p-4">
                <h1>My Carousel</h1> ...is centered!
            </div>
            <div class="carousel-item align-items-center flex-column p-4">
                <h1>2 Carousel</h1> ...is centered!
            </div>
            <div class="carousel-item align-items-center flex-column p-4">
                <h1>3 Carousel</h1> ...is centered!
            </div>
       </div>

http://www.codeply./go/9I7voUaDUi

In both cases I've removed the carousel-caption. The carousel-caption should only be used if you want the text to overlay a slide image. There's no reason to use the 'carousel-caption' if there is no image, just put the content inside carousel-item.

---

Also see: Vertically center text in Bootstrap carousel

It looks like it's a bination of the position:relative; you were adding on the .carousel-caption and the absence of a 'height' value for the .carousel-item

Here is a working fiddle: https://jsfiddle/z0cxhgc1/1/

Update: Bootstrap's default carousel automatically takes on the height of the image, and then uses

position: absolute;
right: 15%;
bottom: 20px;
left: 15%;

to style the caption over the lower center of the image. without the image's natural height, everything else in the carousel is positioned absolutely, and since the carousel itself has a height of 0, it was showing up 20px above the bottom -- or 20px above and outside of the carousel.

your position: relative; style got it showing again because putting it back in the document flow gave the slide element a natural height again, but was conflicting with the other styles in terms of positioning.

Short answer:

Add some height to the carousel item so that it does not disappear (since you are not using an image):

.carousel-item{
    height:200px;
}

Remove:

.carousel-caption {
    position: relative;
    text-align: center;
}

More detailed answer:

I believe that your answer can be found here. Normally, your captions should be centred, but if not then try adding "text-center" to your "carousel-caption". That should fix it.

An example solution using Bootstrap 4 Alpha 6 showing:

• the usage of d-* for hiding and showing text on different device screens and adjusting the display type i.e d-md-block means set the display to block on medium devices
• the alignment of text

.bg-chrome {
   background: blue;
 }
 
 .carousel-item{
   height:200px;
 }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery./jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div id="carouselIndicators" class="carousel slide bg-chrome" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselIndicators" data-slide-to="1"></li>
    <li data-target="#carouselIndicators" data-slide-to="2"></li>
    <li data-target="#carouselIndicators" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <div class="carousel-caption d-block">
        <h3>A carousel caption with text on all device screens and aligned to the center</h3>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption d-block text-left">
        <h3>A carousel caption with text aligned to the left</h3>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption d-block text-right">
        <h3>A carousel caption with text aligned to the right</h3>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption d-none d-md-block">
        <h3>A carousel caption with hidden text on small devices</h3>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous slide</span>
  </a>
  <a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next slide</span>
  </a>
</div>

I updated your fiddle. Left and right 15% PLUS text centered let the heading confuse

https://jsfiddle/jchp6bg9/10/ Added

left:0%; 
right: 0%; 

to your css code

For carousel with fixed height (e.g.: 400px) this works for me:

.carousel-caption {
    position: relative;
    left: 0;
    padding-top: 150px; // Set relative to your carousel height
}

.carousel-caption{
    background-color: rgb(209, 209, 154);
    top: 30%;
    height: auto;
    max-height: 120px;
}

本文标签： javascriptHow to center caption in Bootstrap 4 carouselStack Overflow