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

问题描述

我有一个 bootstrap carousel，我正在尝试为 carousel 创建一个始终垂直居中并稍微向左定位的标题.我有用于水平定位的 css.. 但是当我尝试垂直定位时，标题不会保持原样.我怎样才能让 .carousel-caption 始终垂直居中并稍微向左?

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%);

现在你需要去掉额外的 bottom 空间，这是由默认引导 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，以下 CSS 可防止元素放置在半个像素上时出现模糊.

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屋！