twitter-bootstrap - 如何在滑块中垂直对齐推荐的最佳实践是什么
问题描述
我正在尝试创建一个仅包含文本的推荐旋转木马滑块推荐文本在 div 的顶部对齐,无法在中心垂直对齐文本。
<div class="container">
<div id="carouselContent" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active text-center">
<p>Testimonial 1</p>
</div>
<div class="carousel-item text-center">
<p>Testimonial 2</p>
</div>
<div class="carousel-item text-center">
<p>Testimonial 3</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
#carouselContent{
height: 200px;
}
.container {
background-color: blue;
color: white;
}
Expecting testimonial to align vertically in the center but now align at the top of the div.
解决方案
最后,找到了解决方案:
<div id="carouselContent" class="carousel slide text-center d-flex align-items-center" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active text-center">
<p>Testimonial 1</p>
</div>
<div class="carousel-item text-center">
<p>Testimonial 2</p>
</div>
<div class="carousel-item text-center">
<p>Testimonial 3</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
#carouselContent{
height: 200px;
}
.container {
background-color: blue;
color: white;
}
推荐阅读
- reference - 在 Tableau 中将日期与 makedate 匹配
- android - 如何更新房间数据库中的检查 recyclerview 列表?
- database - 关机后如何启动 pg_cron 扩展
- c - 使用密码的公钥加密:允许使用公共盐吗?
- c - 我不知道如何解决这个问题
- c++ - 为什么 c++ 入门这本书使用 struct 关键字来描述类?
- python - Python中内置函数的实例方法别名
- django - 无法从 kwargs 获取主键
- java - java format timestamps with "Z" instead of "+"
- python - 以可访问且连贯的结构存储多个 pandas DataFrame