Lồng 1 icon vào giữa của bức ảnh

#1

-Bác nào cao tay cho hỏi làm thế nào để có thể lồng 1 icon vào giữa của bức ảnh được ạ
VD: em có một tấm ảnh vào em muốn lồng icon kính lúp hoặc một hình vuông vào center của bức ảnh thì phải làm thế nào ạ
em đã tham khảo hết trên bác google mà vẫn chưa tìm thấy đành nhờ các thánh cáo tay ạ

#2 
<div id="image">
    <i class='icon'></i>
</div>

#image : background-image: url();

3 Likes
#3 
Div#image {
   position: relative:
   width:320px:
   Height:320px;
   Backgroung: url();
}

.icon {
   Display:block:
   Width:16px;
   Height:16px;
   Background:url();
   Position: absolute;
   Top: 0;
   Left:0;
   Right:0;
   Bottom:0;
   Margin: auto;
}
2 Likes
#4

code cua ban chua cho ra duoc center, vi top:0;

1 Like
#5

Bạn thử chưa. Khi bạn set absolute với 4 thuộc tính top, left, right, bottom bằng 0 thì nó set center nhé.

1 Like
#6

bạn giải thích vậy không đúng lắm, khi set top: 0;left:0;right:0;bottom:0; thì thẻ con sẽ fit 100% width, height với thẻ cha.
sau đó bác set width và height cho nó và margin: auto để căn giữa cả left right, top bottom.

Code của bác chạy good khi bỏ display:block đi nhé.

1 Like
#7

bạn có thể tham khảo ở đây,
Mình thêm display: block để cho 1 số tag như span, strong … nếu không set thuộc tính display thì sẽ không có width và height.

1 Like
#8

mình cảm ơn bạn nhé code rất chi tiết và có demo nên mình xem đã hiểu hơn

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?