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:

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):

*
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ả:




Bạn đang xem: Căn giữa hình ảnh trong css


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.


*

Nguyễn Đức Anh

Sinh năm 1987. Thích Content, SEO, Ads, Tăng tốc website và Thương mại điện tử.


Share this:


Danh mục CSS
Selector thuộc tính trong CSS
Bảo mật Facebook bằng Điện thoại – tránh bị hack tài khoản

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

*

kghjkhgkhj
Kết quả vẫn như cũ

Trả lời
*

nguyen vu

hay.like

Trả lời
*

Dinhvinhnguyen

ĐÃ thành công

Trả lời
*

Anony

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
Ý Nhân

cho em hỏi làm sao để căn giữa như cái logo của anh thế ạ

Trả lời
Kha Nguyen

Mình muốn canh giữa mặc định cho tất cả các ảnh mỗi lần post bài thì chèn code nào vào css của theme ạ?

Trả lời

Viết một bình luận Hủy

Bình luận

Tên
Email
Trang web

Δ


Trong quá trình làm giao diện chắc chắn chúng ta sẽ phải căn giữa một item nào đó trong giao diện, có rất nhiều cách để có thể căn giữa một item. Trong bài viết hôm nay mình sẽ chia sẻ mọi người 3 cách căn giữa, tùy vào từng trường hợp các bạn có thể áp dụng các cách khác nhau nhưng cứ cách nào đơn giản nhất thì các bạn hãy sử dụng

Đầu tiên ta sẽ sử dụng chung 1 file html như sau để tiến hành căn giữa trong cả 3 trường hợp

*{ padding: 0; margin: 0;}.box { background-color: salmon; width: 100%; height: 300px;}

*

Sử dụng line-height

Đầu tiên để căn giữa theo chiều ngang ta thêm thuộc tính text-align: center cho thẻ H3. Để có thể căn theo chiều dọc ta sẽ thêm thuộc tính line-height: 300px cho thẻ H3. Đối với chữ thì nó sẽ luôn luôn nằm giữa chiều cao của dòng chữ đó cho nên ta chỉ cần điều chỉnh chiều cao của dòng chữ đúng bằng với thẻ cha của nó thì chữ sẽ tự động được căn giữa theo chiều dọc ở đây box có chiều cao là 300px nên tao set line-height của H3 bằng 300px ta được kết quả

h3 { text-align: center; line-height: 300px;}

*

Sử dụng Flexbox

Đề căn giữa sử dụng Flexbox ta cần set cho thẻ cho của thẻ ta cần căn giữa có thuộc tính display: flex, căn giữa theo chiều ngang justify-content: center;, căn giữa theo chiều dọc align-items: center;ta cũng thu được kết quả tương tự

.box { background-color: salmon; width: 100%; height: 300px; display: flex; justify-content: center; align-items: center;}Sử dụng position
Để căn giữa bằng positon thì đầu tiên thẻ cha của thẻ cần căn giữa phải có position: relative;, thẻ con thì sẽ có position: absolute;. Khi đó ta muốn căn giữa theo chiều ngang ta sẽ cho thẻ cho cách left 50% left: 50% khi đó thẻ con sẽ cách bên trái 50% nhưng ta muốn thẻ này phải nằm giữa của màn hình thì ta tiến hành lùi thẻ con lại 50% so với chiều cao của chính nó khi đó nó sẽ nằm giữa theo chiều ngang transform: translate
X(-50%);. Đối với chiều dọc thì tương tự ta được

.box { background-color: salmon; width: 100%; height: 300px; position: relative;}h3 { position: absolute; left: 50%; transform: translate
X(-50%); top: 50%; transform: translate


Xem thêm: Cách Thay Đổi Thông Tin Cá Nhân Trên Gmail, Thay Đổi Địa Chỉ Email Cho Tài Khoản Của Bạn

Y(-50%);}Tổng kết
Đó là 3 cách căn giữa 1 item bên trong 1 item khác. Đa phần 3 cách này sẽ giải quyết được các trường hợp cần căn giữa. Các bạn có thể linh động tùy vào từng trường hợp mà lựa chọn cách phù hợp để căn giữa 1 item nào đó