Html 如何垂直居中 Bootstrap 轮播标题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27279865/
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
How to vertically center a Bootstrap carousel-caption?
提问by SuperVeetz
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?
我有一个引导轮播，我正在尝试为轮播创建一个标题，该标题总是垂直居中并稍微向左定位。我有用于水平定位的 css.. 但是当我尝试垂直定位时，标题不会保持原样。我怎样才能保持 .carousel-caption 总是垂直居中并稍微向左？
HTML:
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:
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
Bootply：http: //www.bootply.com/aWK6oVRWVo
回答by Sebsemillia
You can use the translateYfunction of the CSS property transformto vertically align elements. Browser supportis quite decent, including IE9.
Therefore just add the following to your .carousel-captionCSS.
您可以使用translateYCSS 属性的功能transform来垂直对齐元素。浏览器支持相当不错，包括 IE9。因此，只需将以下内容添加到您的.carousel-captionCSS 中。
top: 50%;
transform: translateY(-50%);
Now you need to get rid of the extra bottomspace, added by the default bootstrap CSS. Add the following as well to your .carousel-captionCSS.
现在您需要摆脱bottom默认引导 CSS 添加的额外空间。将以下内容也添加到您的.carousel-captionCSS。
bottom: initial;
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.
最后但并非最不重要的一点是给父元素，在这种情况下.item，以下 CSS 以防止将元素放置在半个像素上时出现模糊元素。
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
