我在 Bootstrap 4 中创建文本水平和垂直居中的轮播时遇到问题。
我已经创建了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>
您可以使用 Bootstrap 4 实用程序类(没有额外的CSS是需要的)...
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)