文章插图
除此之外，我们还可以使用 flexbox 实用程序类在内容块的中间或底部对齐图像或其他媒体对象，例如 ， 可以使用 .align-self-center 类进行垂直居中对齐，使用 .align-self-end 类用于底部对齐 。
默认情况下，媒体对象内的媒体是顶部对齐的 。
<!--顶部对齐媒体--><div class="d-flex"><div class="flex-shrink-0"><img src="https://www.huyubaike.com/biancheng/img/xyz.png" width="60" height="60" alt="Sample Image"></div><div class="flex-grow-1 ms-3"><h5>顶部对齐媒体 <small class="text-muted"><i>- 这是默认对齐方式</i></small></h5><p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p></div></div><hr><!--居中对齐媒体--><div class="d-flex"><div class="flex-shrink-0 align-self-center"><img src="https://www.huyubaike.com/biancheng/img/xyz.png" width="60" height="60" alt="Sample Image"></div><div class="flex-grow-1 ms-3"><h5>居中对齐媒体</h5><p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p></div></div><hr><!--底部对齐媒体--><div class="d-flex"><div class="flex-shrink-0 align-self-end"><img src="https://www.huyubaike.com/biancheng/img/xyz.png" width="60" height="60" alt="Sample Image"></div><div class="flex-grow-1 ms-3"><h5>底部对齐媒体</h5><p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p></div></div>显示的结果如下
文章插图
【Bootstrap5 如何创建多媒体对象】
推荐阅读
- 如何申请QQ账号（无需手机号注册qq)
- 如何申请qq号（qq号申请免费注册)
- 我想申请一个QQ号，怎么操作（qq号被封了申请如何写)
- 自身 如何在linux下检测IP冲突
- 玩跳棋有什么技巧跳棋如何开棋和收尾（跳棋的玩法 技巧)
- 该如何养好一只兔子（兔子单养好还是群养好)
- 制造业数字化转型，本土云ERP系统如何卡位？
- 如何科学养兔子
- 如何解除电脑的安全模式（如何解开电脑安全模式)
- 如何0到1构建DevOps？