Mẹo CSS tự động căn giữa cho ảnh hiển thị trên Web

Cách này áp dụng  cho các trang web sử dụng CSS để hiển thị nhé 🙂 Lý do là vì nhiều khi bạn lười edit code, nhiều lúc thì theme của bạn bị lỗi cần phải sửa. Sau đây la cách:

***

Bước 1: Tải file style.css  từ Host về máy tính bằng FPT client. (mozilla? ). Mở nó ra bằng text hoặc phần mềm hỗ trợ edit code như Dreamweaver chẳng hạn.

Bước 2: Chèn đoạn Code vào vị trí :

.HAHAHA img {max-width:100% ;margin: 0 auto; display: block; }

Trong đó: HAHAHA là vùng bạn muốn mã mãu đỏ phát huy tác dụng.

Chẳng hạn vùng đó là Wrapper thì sẽ là  .wrapper

Bước 3: Lưu file và up đè lên host. Theo dõi kết quả được rồi. Kể từ nay, khi bạn post ảnh, khu vực HAHAHA gì đó sẽ tự động căn giữa.

****

Giải thích ý nghĩa code

.HAHAHA   là cách để ta mô tả về class chịu ảnh hưởng.

img   là mặc định hiển thị cho ảnh (image)

max-width  : qui định độ rộng tối đa. Có thể dùng % hoặc px (pixel)

margin: 0 auto    : Lệnh căn chỉnh tự động vào giữa

display: block     : hiển thị ảnh dạng 1 hộp, không chèn ngang chữ lên 2 bên.

Giangliao.