Hướng dẫn how do you horizontally and vertically center a div in bootstrap 5? - làm cách nào để căn giữa div theo chiều ngang và chiều dọc trong bootstrap 5?

Thay đổi sự liên kết của các yếu tố với các tiện ích vertical-alignment. Xin lưu ý rằng ALign dọc chỉ ảnh hưởng đến nội tuyến, khối nội tuyến, bảng nội tuyến và các phần tử ô bảng.

Chọn từ .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
0 khi cần thiết.

Để tập trung vào nội dung phi dòng theo chiều dọc (như

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
1 và hơn thế nữa), hãy sử dụng các tiện ích Flex Box của chúng tôi.

Với các yếu tố nội tuyến:

baselinetopmiddlebottomtext-toptext-bottom top middle bottom text-top text-bottom

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Với các ô bảng:

đường cơ sởđứng đầuở giữađáyText-Topvăn bản đáy

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

Sass

API tiện ích

Các tiện ích căn chỉnh dọc được khai báo trong API tiện ích của chúng tôi trong

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
2. Tìm hiểu cách sử dụng API Tiện ích.

    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),
    

Thêm

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
3 vào phần tử cha để tạo thùng chứa Flexbox và chuyển đổi thành các mục Flex.

Thêm

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
4 vào phần tử cha để tập trung vào nội dung của nó theo chiều dọc.

Thêm

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
5 vào phần tử cha để tập trung vào nội dung của nó theo chiều ngang.

Mục Flex

Mục Flex

Mục Flex

  • HTML

        
             
        <div class="d-flex align-items-center justify-content-center" style="height: 250px;">
          <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
          <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
          <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
      </div>      
        
        
    

Bootstrap 5 căn chỉnh dọc

Các tiện ích flexbox cho căn chỉnh dọc.

Lưu ý: Để sử dụng nâng cao, hãy đọc tài liệu flexbox của chúng tôi. For advanced usage read our Flexbox docs.


Cả theo chiều dọc và chiều ngang

Thêm

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
3 vào phần tử cha để bật chế độ Flex.Sau đó sử dụng (alsso trên phần tử cha)
<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
4 để căn chỉnh nội dung theo chiều dọc và
<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
5 để căn chỉnh nội dung theo chiều ngang.


Chỉ theo chiều dọc

Thêm

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
3 vào phần tử cha để bật chế độ Flex.Sau đó sử dụng (alsso trên phần tử cha)
<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
4 để căn chỉnh nội dung theo chiều dọc


Tùy chọn Flexbox

Sử dụng các tiện ích

    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),
    
1 trên các thùng chứa Flexbox để thay đổi sự liên kết của các mục Flex trên trục chéo (trục y để bắt đầu, trục X nếu
    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),
    
2).Chọn từ
    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),
    
3,
    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),
    
4,
    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),
    
5,
    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),
    
6 hoặc
    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),
    
7 (mặc định trình duyệt).

Mục Flex

Mục Flex

Mục Flex

Mục Flex

Mục Flex

Mục Flex

Mục Flex

Mục Flex

Mục Flex

Mục Flex

Mục Flex

Mục Flex

Mục Flex

Mục Flex

Mục Flex

Các biến thể đáp ứng cũng tồn tại cho

    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),
    
1.

  •     "align": (
          property: vertical-align,
          class: align,
          values: baseline top middle bottom text-bottom text-top
        ),
        
    9
  •         
                 
            <div class="d-flex align-items-center justify-content-center" style="height: 250px;">
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
          </div>      
            
            
        
    0
  • <table style="height: 100px;">
      <tbody>
        <tr>
          <td class="align-baseline">baseline</td>
          <td class="align-top">top</td>
          <td class="align-middle">middle</td>
          <td class="align-bottom">bottom</td>
          <td class="align-text-top">text-top</td>
          <td class="align-text-bottom">text-bottom</td>
        </tr>
      </tbody>
    </table>
    4
  •         
                 
            <div class="d-flex align-items-center justify-content-center" style="height: 250px;">
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
          </div>      
            
            
        
    2
  •         
                 
            <div class="d-flex align-items-center justify-content-center" style="height: 250px;">
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
          </div>      
            
            
        
    3
  •         
                 
            <div class="d-flex align-items-center justify-content-center" style="height: 250px;">
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
          </div>      
            
            
        
    4
  •         
                 
            <div class="d-flex align-items-center justify-content-center" style="height: 250px;">
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
          </div>      
            
            
        
    5
  •         
                 
            <div class="d-flex align-items-center justify-content-center" style="height: 250px;">
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
          </div>      
            
            
        
    6
  •         
                 
            <div class="d-flex align-items-center justify-content-center" style="height: 250px;">
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
          </div>      
            
            
        
    7
  •         
                 
            <div class="d-flex align-items-center justify-content-center" style="height: 250px;">
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
          </div>      
            
            
        
    8
  •         
                 
            <div class="d-flex align-items-center justify-content-center" style="height: 250px;">
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
              <div class="p-2 m-2 bg-info text-white shadow rounded-2">Flex item</div>
          </div>      
            
            
        
    9
  • vertical-alignment0
  • vertical-alignment1
  • vertical-alignment2
  • vertical-alignment3
  • vertical-alignment4
  • vertical-alignment5
  • vertical-alignment6
  • vertical-alignment7
  • vertical-alignment8
  • vertical-alignment9
  • .align-baseline0
  • .align-baseline1
  • .align-baseline2
  • .align-baseline3
  • .align-baseline4
  • .align-baseline5
  • .align-baseline6
  • .align-baseline7
  • .align-baseline8