Cách căn giữa ảnh bằng CSS: cứ tưởng thế nào!

Bởi

Căn giữa chữ rất dễ, bạn chỉ cần sử dụng thuộc tính text-align: center; là OK.
Còn căn giữa ảnh thì lại không dễ như thế! Đã rất nhiều lần tôi vò đầu bứt tai vì chẳng căn giữa nổi! Thực ra kỹ thuật không có gì đặc biệt, nhưng cần mẹo nhỏ thì mới được. Đấy là đặc điểm chung của mẹo, biết thì rất dễ mà không biết thì khó vô cùng (chém gió tí!)

Giả dụ tôi có cái ảnh như này:

ảnh chưa được căn giữa

Theo mặc định, giống như trên, bức ảnh sẽ dạt về bên trái, vậy làm thế nào để tôi cho nó ra giữa bây giờ?

Cách làm như sau:

1. Đầu tiên trong mã đánh dấu HTML của ảnh, bạn thêm class có tên là cangiua vào (bất kỳ ảnh nào muốn căn giữa thì bạn đều đưa class này vô, dùng class sẽ hợp lý hơn id trong trường hợp này):

<img src="images/o-to.png" class="cangiua"/>

2. Tiếp theo trong CSS bạn thêm mấy dòng sau:

img.cangiua {display: block; margin-left: auto; margin-right: auto;}

Và đây là kết quả:

ảnh đã được căn giữa

Vậy là xong! Giờ thì căn giữa ảnh thật dễ :))

Có thể bạn muốn đọc thêm bài thuộc tính display trong CSS & margin, padding để hiểu rõ hơn ý nghĩa những dòng code trên.

Xem thêm:

Bài viết liên quan:

  1. Mô hình hộp trong CSS Với CSS, các thẻ HTML được xem như chiếc hộp. Hộp này có nội dung, đệm (padding), đường viền (border) và lề (margin). Sở dĩ bình thường bạn chẳng thấy...
  2. Loại bỏ hiệu ứng nút bấm và xoay màn hình phóng to chữ trên trình duyệt Safari của iPhone Bạn chỉ cần thêm đoạn mã CSS dưới đây là sẽ giải quyết được vấn đề:...
  3. Mẹo với @font-face: định nghĩa font-weight và font-style để giữ CSS của bạn đơn giản hơn Khi chúng ta sử dụng @font-face để nhúng font vào website, mà bản thân font đó có một số weight (độ đậm nhạt, light, bold,…) và style (nghiêng, italic) khác...
  4. Thuộc tính position trong CSS Thuộc tính position dùng để lấy điểm mốc tham chiếu cho việc xác định vị trí của hộp thẻ. Có thể bạn quen với việc dùng float để tạo bố cục nhưng không...
  5. Tìm hiểu về font cho web (hướng dẫn từ Mozilla) Trong phần đầu của bài, chúng ta sẽ khám phá các tính năng cơ bản dành cho việc định kiểu font và văn bản. Càng về sau, bài viết sẽ...

26 bình luận về “Cách căn giữa ảnh bằng CSS: cứ tưởng thế nào!”

  12. phải tạo thêm 1 class nữa trong css như bài viết chứ không tạo class thuần được.
    thay vì:
    cangiua{
    //nội dung
    }
    phải là:
    img.cangiua{
    //nội dung
    }
    Bạn nào làm không được có thể tham khảo điểm này.

    Trả lời

Viết một bình luận