2

Canh giữa theo cả chiều ngang và dọc trong CSS

Canh giữa một đối tượng ảnh, text hay khối div theo chiều ngang khá đơn giản. Thường thì chúng ta dùng các đơn giản là set thuộc tính text-align:center.  Nhưng canh giữa đối tượng theo chiều dọc thì khá khó khăn. Nhiều bạn vẫn lầm tưởng vertical-align với giá trị middle thì có thể canh giữa theo chiều dọc, nhưng tôi chắc chắn 100% là không được, vì thuộc tính này chỉ dùng cho content như text hay images. Nhớ lại thời kỳ chưa có CSS3 ra đời, để tự động canh chỉnh vị trí của element dạng div trên trang, hầu như phải dùng javascript: tính chiều cao cửa sổ, tính chiều cao parent element, tính chiều cao child, rồi mới set vị trí của đối tượng…

Demo

canh-giua-div

Kết quả mong muốn là child màu đỏ được canh giữa parent màu xanh. (parent tôi để hai vạch chính giữa để các bạn có thể biết vị trí chính xác “ở giữa” là đâu)

Code

Ngày nay với CSS3, hầu như mọi việc rất đơn giản. Đoạn code ngắn gọn như sau:

html

CSS

Đầu tiên tôi reset toàn bộ giá trị margin và padding mặc định trên trình duyệt về 0.

Tiếp theo tôi đặt #container thành relative position để chứa các đối tượng con là absolute (Lý do tại sao sử dụng relative và absolute tôi sẽ giải thích bên dưới).

Để có thể canh chỉnh tự động, tôi dùng cách set vị trí của child là 50% (ở giữa) của parent rồi sau đó đẩy child qua trái (hay đẩy lên top) 1 đoạn bằng 50% child. Đây là kỹ thuật quan trọng nhất trong việc canh chỉnh. Để hiểu lý do tại sao phải đẩy qua trái rồi lại đẩy qua trái, xem demo ở dưới:

Như các bạn thấy, chính là nhờ CSS3 hỗ trợ hàm translate()  tính toán theo kích thước nội tại của element, còn left/top để tính toán vị trí theo kích thước của parent, nên ta có dịch chuyển cho tâm của parent và child trùng với nhau, nhờ đó canh giữa được đối tượng.

Cách làm đáng chú ý dựa trên:

Với cách làm này, ta hầu như có thể áp dụng cho mọi loại đối tượng trên trang web từ hình ảnh, video, các thẻ div, form, …

Lưu ý:

Với cách canh giữa này, khi thực hiện canh giữa theo chiều dọc thì ta buộc phải dùng position và thuộc tính top mà không dùng margin-top. Lý do tại sao? Đó là vì margin-top không chính xác khi set giá trị là phầm trăm. Nó luôn margin theo giá trị được tính từ % của chiều rộng chứ không phải là tính theo % chiều cao như chúng ta vẫn nghĩ.

Các bạn có thể xem thêm tại W3 – Box mục 8.3

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for ‘margin-top’ and ‘margin-bottom’ as well. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.

 

Hoàng Tựa

Yêu thích lập trình web và tạo ra những thứ đẹp đẽ.

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *