如何垂直居中Bootstrap轮播标题？ [英] How to vertically center a Bootstrap carousel-caption?

问题描述

我有一个引导旋转木马，我试图创建一个旋转木马的标题，该旋转木马总是垂直居中，并且位于左侧。我有水平定位的css ..但是当我尝试垂直位置，标题不会留下。

I have a bootstrap carousel and I am trying to create a caption for the carousel that is always vertically centered and positioned slightly to the left. I have the css for the horizontal positioning.. but when I try to position vertically, the caption doesn't stay put. How can i keep the .carousel-caption always centered vertically and slightly to the left?

HTML：

    <!-- start JumboCarousel -->
    <div id="jumboCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->
        <ol class="carousel-indicators hidden-xs">
            <li data-target="#jumboCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#jumboCarousel" data-slide-to="1"></li>
            <li data-target="#jumboCarousel" data-slide-to="2"></li>
            <li data-target="#jumboCarousel" data-slide-to="3"></li>
        </ol><!-- end carousel-indicators -->

        <!-- Wrapper for Slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active" id="slide1">
                <a href="#"><img src="http://placehold.it/1920x720&text=Slide+1" alt="Slide 1"></a>
                <div class="carousel-caption">
                    <h1>Check Out this Moose</h1>
                    <p class="lead">This text is super engaging and makes you want to click the button.</p>
                    <a href="#" class="btn btn-lg btn-primary">Learn More</a>
                </div><!-- end carousel-caption -->
            </div><!-- end slide1 -->
            <div class="item" id="slide2">
                <img src="http://placehold.it/1920x720&text=Slide+2" alt="Slide 2">
                <div class="carousel-caption">
                    <h1>#Slide Title</h1>
                    <p class="lead">This text is super engaging and makes you want to click the button.</p>
                    <a href="#" class="btn btn-lg btn-primary">Learn More</a>
                </div><!-- end carousel-caption -->
            </div><!-- end slide2 -->
            <div class="item" id="slide3">
                <img src="http://placehold.it/1920x720&text=Slide+3" alt="Slide 3">
                <div class="carousel-caption">
                    <h1>#Slide Title</h1>
                    <p class="lead">This text is super engaging and makes you want to click the button.</p>
                    <a href="#" class="btn btn-lg btn-primary">Learn More</a>
                </div><!-- end carousel-caption -->
            </div><!-- end slide3 -->
            <div class="item" id="slide4">
                <img src="http://placehold.it/1920x720&text=Slide+4" alt="Slide 4">
                <div class="carousel-caption">
                    <h1>#Slide Title</h1>
                    <p class="lead">This text is super engaging and makes you want to click the button.</p>
                    <button type="button" href="#" class="btn btn-lg btn-primary">Learn More</button>
                </div><!-- end carousel-caption -->
            </div><!-- end slide4 -->
        </div><!-- end carousel-inner -->

    </div><!-- end jumboCarousel -->

CSS：

#jumboCarousel {
    margin-top: 70px;
    min-height: 300px;
    min-width: 100%;
}
#jumboCarousel img {
    min-height: 300px;
    min-width: 100%;
}
#jumboCarousel > .carousel-indicators > li {
    border-radius: 0px;
    min-width: 25px;
    background-color: #9d9d9d;
    border: 1px solid black;
    margin-right: 10px;;
    margin-left: 10px;;
}
#jumboCarousel > .carousel-indicators > .active {
    background-color: orange;
}
#jumboCarousel .carousel-caption {
    color: black;
    right: 58%;
    text-align: center;
    max-width: 500px;
    left: auto;
    top: auto;
}

任何我做的标题垂直对齐结束了标题感谢您的帮助。

anything I do to give the caption a vertical alignment has ended up with the caption getting pushed out of the top of the carousel as the screen-size decreases.. Thanks for the help.

Bootply： http://www.bootply.com/aWK6oVRWVo

推荐答案

您可以使用CSS属性 transform 的 translateY 函数垂直对齐元素。 浏览器支持相当不错，包括IE9。
因此，只需将以下内容添加到 .carousel-caption CSS。

You can use the translateY function of the CSS property transform to vertically align elements. Browser support is quite decent, including IE9. Therefore just add the following to your .carousel-caption CSS.

top: 50%;
transform: translateY(-50%);

现在你需要摆脱额外的底部空格，由默认的bootstrap CSS添加。将 .carousel-caption CSS添加到

Now you need to get rid of the extra bottom space, added by the default bootstrap CSS. Add the following as well to your .carousel-caption CSS.

bottom: initial;

最后但并非最不重要的是给父元素，在这种情况下 .item

And last but not least give the parent element, in this case .item, the following CSS to prevent blurry elements when it's placed on half a pixel.

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

工作示例

这篇关于如何垂直居中Bootstrap轮播标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！