Cách Canh Giữa Hình Ảnh Bằng Css
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.
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ụ
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
Ta áp dụng đoạn css như sau:
.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.
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:
.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.
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é