如何在Bootstrap 4轮播中居中显示字幕？

Question

I essentially copied the captioned carousel example from the Bootstrap 4 documentation: https://v4-alpha.getbootstrap.com/components/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.com/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

Answer 1

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.com/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.com/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.com/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

Answer 2

It looks like it's a combination 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.net/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.

Answer 3

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 ie 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.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/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> 

Answer 4

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

https://jsfiddle.net/jchp6bg9/10/ Added

left:0%; 
right: 0%; 

to your css code

Answer 5

For carousel with fixed height (eg: 400px) this works for me:

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

Answer 6

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