Bootstrap - 垂直对齐


本章讨论 Bootstrap 提供的垂直对齐实用程序。

  • 您可以更改inline、inline-block、inline-tabletable cell 元素的垂直对齐方式。

  • 根据您的需要从以下课程中选择:

    • .align-基线

    • .align-顶部

    • .align-中间

    • .align-底部

    • .align-文本-底部

    • .align-文本顶部

  • 为了对齐非内联内容,请使用弹性框实用程序

让我们看一个对齐内联元素的示例:

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html> <html> <head> <title>Bootstrap - Vertical align</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h4 class="display-5">Vertical align</h4> <p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p><br><br> <button class="btn align-baseline text-bg-success">align baseline</button> <button class="btn align-top text-bg-success">align top</button> <button class="btn align-middle text-bg-success">align middle</button> <button class="btn align-bottom text-bg-success">align bottom</button> <button class="btn align-text-top text-bg-success">align text top</button> <button class="btn align-text-bottom text-bg-success">align text bottom </button> </div> </body> </html>

让我们看一个对齐表格单元格元素的示例:

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html> <html> <head> <title>Bootstrap - Vertical align</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h4 class="display-5">Vertical Align - Table cell elements</h4> <p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p><br><br> <table class="table-bordered bg-light" style="height: 100px;"> <tbody> <tr> <td class="p-2 align-baseline">align baseline</td> <td class="p-2 align-top">align top</td> <td class="p-2 align-middle">align middle</td> <td class="p-2 align-bottom">align bottom</td> <td class="p-2 align-text-top">align-text-top</td> <td class="p-2 align-text-bottom">align-text-bottom</td> </tr> </tbody> </table> </div> </body> </html>