Mẹo nhỏ: Để tìm kiếm chính xác các bài viết của Vuihecungchocopie.vn, hãy search trên Google với cú pháp: "Từ khóa" + "vuihecungchocopie". (Ví dụ: công thức giải rubik 3x3 vuihecungchocopie). Tìm kiếm ngay
860 lượt xem

Hướng Dẫn Căn Giữa Hình Ảnh Trong Html (Kèm Ảnh), Cách Căn Giữa Ảnh Bằng Css: Cứ Tưởng Thế Nào!

Bạn đang quan tâm đến Hướng Dẫn Căn Giữa Hình Ảnh Trong Html (Kèm Ảnh), Cách Căn Giữa Ảnh Bằng Css: Cứ Tưởng Thế Nào! phải không? Nào hãy cùng Vuihecungchocopie đón xem bài viết này ngay sau đây nhé, vì nó vô cùng thú vị và hay đấy!

Như đã hữa trong bài trước, tôi viết bài này để hướng dẫn các bạn canh giữa một hình ảnh.

Đang xem: Căn giữa hình ảnh trong html

Việc canh giữa theo chiều ngang thì rất dễ, ta chỉ cần để thuộc tính “text-align:center” là có thể làm được điều đó, nhưng canh giữa theo chiều dọc và chiều ngang cùng mọt lúc thì như thế nào? mình nghĩ không phải ai cũng biết điều này. Có rất nhiều cách canh giữa như vậy, đây là một trong những cách tôi đã sử dụng.

1. Dùng thuộc tính background

Thay vì ta dung một thẻ “img” thì ta cho thẻ “div” đó một thuộc tính background là tấm hình đó, cái này lúc trước tôi tự nghĩ ra được khi làm một dự án về studio.

Đây là dự án đó, trang này tôi code tay, lúc đó còn ít kinh nghiệm nên code cũng hơi lập chập, các bạn click vào một album nào đó bất kỳ để xem slider chạy.

Đây là đoạn code ví dụ

Source code

html {width:100%;height:100%;background:url(logo.png) center center no-repeat;}
Cách này phù hợp với những thành phần mang thuộc tính absolute, rất dễ sử dụng.

2. Sử dụng thuộc tính Table

Cách này sử dụng với những phần tử không mang thuộc tính absolute thôi. Nếu ai chưa biết absolute là gì thì xem tại đây

Source code

div>img src=”https://vuihecungchocopie.vn/images/abc.jpg” alt=”hinh ảnh” />/div>
Ta áp dụng đoạn css như sau:

Source code

.hinh{text-align:center;width:300px;height:300px;line-height:300px;text-align:center;}.hinh img{vertical-align:middle;}
Nhìn vô code ở trên chắc không quá khó hiểu phải không? để tôi giải thích một chút qua cho các bạn.

Xem thêm: Hướng Dẫn Giải Rubik 2X2X2, Hướng Dẫn Cách Chơi Rubik 2X2 Cho Người Mới

thẻ Div mang class là hình có chiều ngang và chiều cao là 300px, điều quan trọng ở đây là ta khai báo cái line của nó bằng với chiều cao của cái thẻ div đó.

sau đó ta dung thuộc tính “vertical-align:middle;” để canh giữa tấm ảnh này, tấm ảnh canh giữa theo chiều cao xác định theo line-height chứ không phải “height”, các bạn chú ý.

Còn một điều đáng lưu ý nữa là, nếu thẻ div đó mang thuộc tính “padding” thì nó sẽ không hoặ động được đâu nhé, mình nhớ là như vậy, lâu quá không sử dụng lại nên không chắc có thuộc tính “margin” có hoặt động được không nữa.

cái này thường được dùng cho các trang web trình bày sản phẩm hoặc các slider dạng vertical hoặc horizoncal ( chạy ngang và chạy dọc)

3. Canh chỉnh theo Absolute

Cách này cũng được rất nhiều người sử dụng, tôi dung luôn đoạn html ở trên để làm ví dụ nhé, ta dùng đoạn css như sau:

Source code

.hinh{width:300px;height:300px;position:relative;}.hinh img{position: absolute;top: 50%;left: 50%;width: 200px;height: 200px;margin-top: -100px;margin-left: -100px;}
Cái khác ở cách này là tấm hình mang thuộc tính absolute, đầu tiên ta cho góc ở trên và bên trái của tấm ảnh trùng với tâm của thẻ “div”

sau đó ta cho giá tri ảnh là 200 x 200 và cho nó chạy ngược lại theo “top” và “left” một đoạn bằng nửa chiều cao và nửa chiều ngang của tấm ảnh đó.

Bạn tưởng tượng được cách hoạt động của tấm ảnh đó chưa?

Đây là 3 cách canh giữa mà tôi thường hay sử dụng, tùy theo trường hợp mà ta sử dụng nó, không phải trường hợp nào cũng sử dụng được.

Xem thêm: Rubik 3X3 Game Giải Rubik 3X3 Game Xịn, Game Xếp Hình Rubik

Tôi viết bài theo ngẫu hứng nên thứ tự các bài viết hơi lộn xộn, mong các bác thông cảm.

Nhấn like ở phía trên ủng hộ tinh thần post bài nhé

Cancel ReplyName*
Email*
Website
Comment

*

By

tan

vuihecungchocopie.vn vps gia re | cá nàng hai | linh kien dien thoai | cho thue may chu | thue may chu | may chu ao

*

Facebook

*

Follow Twitter

*

Google Plus

*

RSS Top

Công khai: VUIHECUNGCHOCOPIE.VN là trang web Tổng hợp Ẩm Thực - Game hay và Thủ Thuật hàng đầu VN, thuộc Chocopie Vietnam. Mời thính giả đón xem.

Chúng tôi trân trọng cảm ơn quý độc giả luôn ủng hộ và tin tưởng!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *