CSS Tips – Cách Căn Giữa Hình Ảnh

Hôm nay chúng ta sẽ thử căn giữa một Susuwatari. Những sinh vật nhỏ này thường được gọi là "bụi bẩn" và rất thích di chuyển, vì vậy chúng ta cần giữ cho chúng đứng yên và ở giữa để có thể chụp ảnh. Hãy bắt đầu nào!

Lưu ý: Khi đọc bài viết, vui lòng tham khảo kho lưu trữ (repo) của blog để xem mã nguồn đầy đủ.

Thêm Hình Ảnh Vào HTML

Việc căn giữa hình ảnh là một nhu cầu rất phổ biến. Giả sử chúng ta có hình ảnh "soot" và thêm nó bằng thẻ img thông thường:

<img class="soot" src="soot.jpg" alt="soot!">

Nhớ nhé: Khi viết thẻ ảnh, hãy nhớ rằng thẻ này không thể có các nút con (child nodes), đó là lý do chúng ta không đóng thẻ. Mặc dù trình duyệt có thể không báo lỗi nếu bạn có thẻ đóng </img>, nhưng bất kỳ CSS nào áp dụng cho nó có thể không hoạt động. Vì vậy, hãy tuân theo quy ước trên.

Ngay khi thêm hình ảnh mà không có bất kỳ CSS nào, hình ảnh sẽ hiển thị như sau trên trang:

Điều này xảy ra vì hình ảnh được định vị theo luồng mặc định của trang, trong trường hợp này là bên trái, giống như tiêu đề.

Phương Pháp 1: Sử Dụng margin: 0 auto

Cách dễ dàng nhất để căn giữa "soot" là áp dụng style sau cho bộ chọn img:

img.soot { margin: 0 auto; display: block; }

Ở đây chúng ta thêm tên class vào bộ chọn hình ảnh để tăng độ cụ thể (specificity), trong trường hợp thêm nhiều "soot" khác, chúng ta cần đảm bảo tất cả đều được căn giữa.

Bây giờ hãy kiểm tra trang – đúng rồi, hình ảnh đã được căn giữa!

Vậy chuyện gì đã xảy ra?

• Thuộc tính margin có thể chấp nhận bốn tham số: hai giá trị đầu cho top/bottom, hai giá trị sau cho left/right. Ở đây chúng ta nói với trình duyệt tự xác định margin trái và phải, trình duyệt sẽ đặt chúng bằng nhau, do đó hình ảnh được căn giữa.
• Thuộc tính display có nhiều giá trị. Ở đây chúng ta chọn block, nói với phần tử img chiếm toàn bộ chiều rộng và nằm trên một dòng riêng. Khi áp dụng margin, nó được áp dụng cho toàn bộ chiều rộng của hình ảnh, nên hình ảnh được căn giữa.

Phương Pháp 2: Sử Dụng text-align: center

Chúng ta cũng có thể căn giữa "soot" bằng cách đặt nó bên trong một phần tử cha. Ví dụ một div và áp dụng text-align cho phần tử cha. Để căn giữa hình ảnh, hãy thêm nó vào phần tử cha (thường gọi là container):

.container { text-align: center; }

Vì phần tử div bản chất là một block container, nó sẽ chiếm toàn bộ chiều rộng và các phần tử con bên trong (trong trường hợp này là hình ảnh soot) sẽ được căn giữa!

Kết Luận

Phát âm Susuwatari nghe có vẻ hơi "ngo ngoe" (thử tưởng tượng nói nó nhiều lần). Nhưng ngược lại, căn giữa hình ảnh thì thực sự rất dễ dàng!