Các cách căn dọc giữa trong CSS
Giới thiệu
Đã bao giờ các bạn thắc mắc cái thuộc tính vertical-align: middle trong CSS chưa? Rõ ràng tên nó là căn dọc giữa mà sao nó lại không căn dọc giữa cho mình chứ? Hi vọng bài viết này sẽ giải đáp thắc mắc của các bạn
Vertical Align
Thuộc tính vertical-align là gì? Nó giúp căn dọc theo các chiều trên, giữa, dưới. Tùy vào cách display của 1 element, nó sẽ hoạt động khác nhau
Demo:
Khi dùng vertical-align: middle cho các element display là table-cell, nội dung bên trong cell đó sẽ được căn dọc giữa dựa vào kích cỡ của cái cell chứa nó. Khi dùng vertical-align: middle cho img (hoặc mọi element có thuộc tính display dạng inline, ví dụ: inline, inline-block, inline-flex, inline-grid) nó sẽ căn dọc giữa theo các element khác dạng inline cùng 1 hàng
Các giải pháp căn dọc giữa nội dung
Ta thường gặp 2 bài toán, đó là Căn dọc thành phần cùng 1 hàng và căn dọc thành phần con theo kích cỡ thành phần cha.
1. Dùng inline-block và vertical align (Căn dọc các thành phần cùng 1 hàng)
Ta set thuộc tính display: inline-block và thuộc tính vertical align cho các DOM ngang hàng. Phương pháp này là phương pháp cơ bản, hỗ trợ trên đại đa số trình duyệt. Được dùng khi căn dọc giữa các thành phần cùng 1 hàng (Danh sách, menu trang web, ...)
<style>
.demo-div {
display: inline-block;
vertical-align: middle;
}
</style>
<div class="demo-div">Thuộc <br> tính 1</div>
<div class="demo-div">Thuộc tính 2</div>
<div class="demo-div">Thuộc tính 3 <br> chiếm <br> 3 dòng</div>
Kết quả thu được :
2. Dùng display table và table-cell (Giải quyết được cả 2 bài toán căn dọc)
Set thuộc tính display table (1) cho element bao quát và display table-cell cho element chứa nội dung cần căn giữa.
(1): Cần làm bước này vì element có thuộc tính display: table-cell chỉ có tác dụng khi element đó nằm trong 1 cái table (Hoặc element có display: table)
Tuy nhiên, phương pháp này sẽ khiến mọi thành phần căn dọc chỉ nằm được cùng 1 hàng (Không thể xuống dòng) vì các cell của một bảng thì luôn nằm cùng 1 hàng ngang
Demo:
3. Dùng Flexbox
Ngày xưa thời jQuery còn thịnh hành, rất ít trình duyệt hỗ trợ tốt thuộc tính này.
Ngày nay, đây là giải pháp được dùng nhiều nhất để căn chỉnh nội dung. Nhanh chóng, linh hoạt, và dễ dùng
Nếu dự án yêu cầu các bạn muốn hỗ trợ trên trình duyệt cũ, bạn nên tham khảo trên https://caniuse.com/#feat=flexbox để biết được trình duyệt nào hỗ trợ thuộc tính này
<style>
.flex-wrapper {
background: red;
height: 300px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="flex-wrapper">
<div style="background: blue">Flex 1</div>
<div style="background: yellow">Flex <br> thứ 2</div>
<div style="background: green">Flex thứ 3</div>
</div>
Kết quả thu được:
Lưu ý dùng các prefix -webkit, -moz, ... để đạt hỗ trợ trình duyệt tốt nhất
4. Dùng CSS Grid
Cũng tương tự flexbox, ta có thể dùng thuộc tính CSS display: grid. Các bạn lưu ý về lượng trình duyệt hỗ trợ thuộc tính này nhé https://caniuse.com/#feat=flexbox Các bạn có thể xem cách dùng tại https://www.w3schools.com/css/css_grid.asp
5. Dùng Position Absolute
Ngoài 4 cách trên còn có 1 phương pháp nữa hơi ít phổ thông.
Ý tưởng là
- set position: relative cho element cha
- set position: absolute, top: 50% và transform: translateY(-50%) cho element con
Khi để top 50% cho element con, nó sẽ cách từ phía trên element cha có position: relative khoảng cách là 50% chiều cao element cha. Khi đó elem con sẽ thụt xuống hơi quá nên chưa thật sự được căn dọc giữa.
Sau đó ta cho element con dịch lên trên 1 nửa chiều cao của chính nó thông qua transform: translateY(-50%) (Vì translate theo % sẽ tính theo chiều cao của element được áp dụng).
Lời kết
Mỗi phương pháp đều có cái ưu nhược điểm riêng. Các bạn hãy phân tích và chọn ra phương án thích hợp nhất cho trường hợp của bạn nhé. Cảm ơn các bạn đã đọc, hi vọng các bạn ủng hộ!
All rights reserved
