我在 Bootstrap 4 中创建带有水平和垂直居中文本的旋转木马时遇到问题.
我已经创建了带有轮播的 bootply，但文本就在左上角角落而不是屏幕中间.
<div class="carousel-item"><h1>文本 2</h1>
<div class="carousel-item"><h1>文本 3</h1>
'
您可以使用 Bootstrap 4 实用程序类(不需要额外的 CSS)...
https://www.codeply.com/go/ORkdymGWzM
<div class="carousel-item"><div class="d-flex h-100 align-items-center justify-content-center"><h1>文本 2</h1>
<div class="carousel-item"><div class="d-flex h-100 align-items-center justify-content-center"><h1>文本 3</h1>
I have trouble creating a carousel in Bootstrap 4 with text centered both horizontally and vertically.
I have created the bootply with a carousel, but the text is just in the upper left corner instead of in the middle of the screen.
<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>
You can use the Bootstrap 4 utility classes (no additional CSS is needed)...
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>
这篇关于在 Bootstrap 轮播中垂直居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
