gpt4 book ai didi

html - Bootstrap 4 旋转木马标题垂直对齐

转载 作者:行者123 更新时间:2023-11-28 11:02:00 25 4
gpt4 key购买 nike

<分区>

我想在 bootstrap 4 上将我的旋转木马标题居中,但我找不到实现它的方法。什么都不适合我。我尝试添加 align-items-center justify-content-center text-center 添加到我的 carousel-itemcarousel-caption 但没有任何作用。

body {
overflow-x: hidden;
height: 100%
}

.carousel-item:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
}

.carousel-item {
height: 100vh;
}

.carousel-image-1 {
background: url('../images/miami1.jpeg');
background-size: cover;
}

.carousel-image-2 {
background: url('../images/miami2.jpeg');
background-size: cover;
}

.carousel-image-3 {
background: url('../images/miami3.jpeg');
background-size: cover;
}
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item carousel-image-1">
<div class="container">
<div class="carousel-caption text-right mb-5">
<h1 class="display-3">Sveiki</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor enim ex
exercitationem laboriosam nihil numquam tempora, vitae voluptates. Dolores, maxime!</p>
</div>
</div>
</div>
<div class="carousel-item carousel-image-2 active">
<div class="carousel-caption mb-5">
<h1 class="display-3">Miami</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor enim ex
exercitationem laboriosam nihil.</p>
<a href="#" class="btn btn-primary btn-lg">Sužinok daugiau</a>
</div>
</div>
<div class="carousel-item carousel-image-3">
<div class="container">
<div class="carousel-caption text-right mb-5">
<h1 class="display-3">Sveiki</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor enim ex
exercitationem laboriosam nihil numquam tempora, vitae voluptates. Dolores, maxime!</p>
</div>
</div>
</div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#myCarousel" data-slide="next" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com