twitter-bootstrap 如何使旋转木马内的内容垂直居中？

How to make contents inside carousel vertically center?

提问by Jee Seok Yoon

The carousel I am referring to is Bootstrap's carousel (http://getbootstrap.com/examples/carousel/).

我所指的轮播是 Bootstrap 的轮播 ( http://getbootstrap.com/examples/carousel/)。

I am using the similar code from the example, but I can't place the contents right middle of the parent.

我正在使用示例中的类似代码，但我无法将内容放在父级的正中间。

As you can see, the contents are not centered. I've tried setting the carousel-caption{ vertical-align:middle;}, but nothing changes.

如您所见，内容没有居中。我试过设置 carousel-caption{ vertical-align:middle;}，但没有任何变化。

<div class="carousel-inner">
    <div class="item active">
        <div class="container">
            <div class="carousel-caption">
                !!contents!!
            </div>
        </div>
    </div>
</div>

This is the same code from the example. How can I vertically center the carousel-caption?

这与示例中的代码相同。如何垂直居中旋转木马标题？

回答by Chemical Programmer

.full-width {
    width: 100%;
}

.carousel-caption {
    position: absolute;
    top: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
    
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://placehold.it/300x200" class="full-width" />
            <div class="carousel-caption">
                <div class="full-width text-center">
                    <p>
                        Some text which is vertically, horizontally centered in image
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/300x200" class="full-width" />
            <div class="carousel-caption">
                <div class="full-width text-center">
                    Some text which is vertically, horizontally centered in image
                </div>
            </div>
        </div>
    </div>
    
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    
</div>

The above image is a screenshot of demo.

上图是demo的截图。

1. The image is responsive
2. Caption text is vertically and horizontally centeredin the image

1. 图像是响应式的
2. 标题文本在图像中垂直和水平居中

回答by NoobEditor

for IE8 and above

IE8及以上

.carousel-caption{
  display:table-cell;
  vertical-align:middle;
}

回答by pwolaq

the easiest way is to use a combination of display:inline-blockand line-height, eg.

最简单的方法就是使用的组合display:inline-block和line-height，如。

.container {
    line-height: 100px // height of your carousel
}

.carousel-caption {
    line-height: normal; // restore original line height here
    display: inline-block;
    vertical-align: middle;
}

see example here: http://jsfiddle.net/bQs26/

请参阅此处的示例：http: //jsfiddle.net/bQs26/