twitter-bootstrap 在 Bootstrap 轮播中垂直居中文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45914872/
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 text in Bootstrap carousel
提问by Jamgreen
I have trouble creating a carousel in Bootstrap 4 with text centered both horizontally and vertically.
我在 Bootstrap 4 中创建带有水平和垂直居中文本的旋转木马时遇到问题。
I have created the bootplywith a carousel, but the text is just in the upper left corner instead of in the middle of the screen.
我用旋转木马创建了bootply，但文本只是在左上角而不是在屏幕中间。
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h1>Text 1</h1>
</div>
<div class="carousel-item">
<h1>Text 2</h1>
</div>
<div class="carousel-item">
<h1>Text 3</h1>
</div>′
</div>
</div>
采纳答案by Zim
You can use the Bootstrap 4 utility classes (no additional CSSis needed)...
您可以使用 Bootstrap 4 实用程序类（不需要额外的 CSS）...
https://www.codeply.com/go/ORkdymGWzM
https://www.codeply.com/go/ORkdymGWzM
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner text-center">
<div class="carousel-item active">
<div class="d-flex h-100 align-items-center justify-content-center">
<h1>Text 1</h1>
</div>
</div>
<div class="carousel-item">
<div class="d-flex h-100 align-items-center justify-content-center">
<h1>Text 2</h1>
</div>
</div>
<div class="carousel-item">
<div class="d-flex h-100 align-items-center justify-content-center">
<h1>Text 3</h1>
</div>
</div>
</div>
</div>
回答by Konstantinos Koletsas
You can use display: table;and display: table-cell;display along with vertical-align: middle;
您可以使用display: table;和display: table-cell;显示vertical-align: middle;
.carousel-item {
display: table;
text-align: center;
}
.carousel-item h1 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
The key here is vertical-align: middle;which works only if a div is a table.
这里的关键是vertical-align: middle;仅当 div 是表格时才有效。
Regarding the horizontal alignment, the text-align: center;goes to .carousel-item. I updated my code.
关于水平对齐，text-align: center;转到.carousel-item。我更新了我的代码。
回答by Gerard
Change your CSS for h1into the following:
将您的 CSS 更改为h1以下内容：
.carousel-item h1 {
position: absolute;
margin: 0;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
回答by Asjon
Simply you are missing this:
只是你错过了这个：
<div class="carousel-caption">
Before the <h1>Text 1</h1>So it's like this:
在<h1>Text 1</h1>So之前是这样的：
<div class="carousel-item active">
<div class="carousel-caption">
<h1>Text 1</h1>
</div>
</div>
