Bootstrap - 垂直對齊

本章討論 Bootstrap 提供的垂直對齊實用工具。

您可以更改內聯、內聯塊、內聯表格和表格單元格元素的垂直對齊方式。
根據您的需要選擇以下類：
- .align-baseline
- .align-top
- .align-middle
- .align-bottom
- .align-text-bottom
- .align-text-top
為了對齊非內聯內容，請使用Flexbox 實用工具

讓我們來看一個對齊內聯元素的例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!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>

列印頁面