如何在 Bootstrap 页脚中垂直居中文本？

Question

在 Bootstrap 中创建页脚的最佳方法是什么，其中屏幕中间（水平）是两行文本，屏幕末尾（水平）是一行文本，但垂直居中？

我尝试使用列和偏移列创建页脚 - 但这是最好的方法吗？ 另外我不知道如何使一条线居中。

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <footer class="bg-secondary py-0 mt-auto"> <div class="container-fluid px-5"> <div class="row"> <div class="col-6 offset-3 text-center"> <div class="m-0">First Line</div> <div class="m-0">Second Line</div> </div> <div class="col-3 text-end"> <div class="m-0">One Line Centered</div> </div> </div> </div> </footer>

Answer 1

编辑：

在现代浏览器中执行此操作的正确方法是使用 Flexbox。

有关详细信息，请参阅此。

我正在更新我的代码：- [我在每个 div 中添加一个边框以清除您的期望]

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <style> div{ border: 1px solid green;} </style> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <footer class="bg-secondary py-0 mt-auto"> <div class="container-fluid px-5"> <div class="row"> <div class="col-6 offset-3 text-center"> <div class="m-0">First Line</div> <div class="m-0">Second Line</div> </div> <div class="col-3 text-end" style="display: table; overflow: hidden;"> <div class="m-0 text-center" style="display: table-cell; vertical-align: middle;">One Line Centered</div> </div> </div> </div> </footer>