twitter-bootstrap 垂直居中 Bootstrap Carousel 图像标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19634055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically center Bootstrap Carousel image captions
提问by mr.t.
Is it possible to center the captions in Bootstrap 3.0 vertically?
是否可以将 Bootstrap 3.0 中的标题垂直居中？
Here's a screenshot of how it looks now http://i.imgur.com/OJKaXwv.png
这是它现在的外观截图http://i.imgur.com/OJKaXwv.png
So that the captions, all the text, is in the middle of the picture? Here's my HTML code:
所以标题，所有的文字，都在图片的中间？这是我的 HTML 代码：
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/slide01.jpg" alt="First slide">
<div class="carousel-caption">
<h1>Welcome</h1>
<p>Here you'll see a great text!</p>
</div>
</div>
<div class="item">
<img src="images/slide02.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Great Caption</h1>
<p>So, this will be a great text as well.</p>
</div>
</div>
</div>
<div class="item">
<img src="images/slide03.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more</h1>
<p>Once again you'll see a great text here, seriously it'll be awesome!</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
My CSS file is pretty stock (changed nothing):
我的 CSS 文件非常好（什么都没改变）：
.carousel {
margin-bottom: 60px;
/* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
margin-top: -20px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
min-height: 200px;
background-color: #777;
}
.carousel-inner > .item > img {
width: 100%;
display: block;
max-width: 100%;
}
I just can't get this to work, already tried: http://stackoverflow.com/questions/16887484/positioning-and-styling-of-twitter-bootstrap-carousel-image-captions/19623418#19623418 , http://stackoverflow.com/questions/19070256/center-content-vertically-in-bootstrap3-carousel-with-flexbox , http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ , http://jsfiddle.net/pYjnF/1/
我只是无法让它工作，已经尝试过： http://stackoverflow.com/questions/16887484/positioning-and-styling-of-twitter-bootstrap-carousel-image-captions/19623418#19623418 , http://stackoverflow.com/questions/19070256/center-content-vertically-in-bootstrap3-carousel-with-flexbox , http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ , http://jsfiddle.net/pYjnF/1/
None of them worked they simply didn't center the captions.
他们都没有工作，他们只是没有将标题居中。
I'm now working a day just on centering the text and somehow have the impression that it's embarrassingly easy but I just can't figure out how to do it.
我现在正在工作一天，只是为了让文本居中，不知何故，我觉得这很容易令人尴尬，但我就是不知道该怎么做。
回答by shruti
try adding this code in your css:
尝试在您的 css 中添加此代码：
.carousel-caption {
margin-bottom: 50px;
}
change that px value according to your image size.
根据您的图像大小更改该 px 值。
