สาธิตการวางข้อความบนรูปภาพที่ตำแหน่งต่างๆ ทั้ง 5 จุด: มุม 4 มุม + กลาง ใช้ Class Utility (.TL, .TR, .BL, .BR, .center)
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1{ text-align: center; } .imageContainer { margin-left:36%; display: inline-block; position: relative; text-align: center; color: rgb(64, 11, 124); } .caption{ font-size: 25px; font-weight: bolder; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .BL { position: absolute; bottom: 8px; left: 16px; } .TL{ position: absolute; top: 8px; left: 16px; } .TR { position: absolute; top: 8px; right: 16px; } .BR { position: absolute; bottom: 8px; right: 16px; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <h1>Place text on image example</h1> <div class="imageContainer"> <img src="https://i.picsum.photos/id/59/500/500.jpg"> <div class="caption BL">Bottom Left Text</div> <div class="caption TL" >Top Left Text</div> <div class="caption TR">Top Right Text</div> <div class="caption BR">Bottom Right Text</div> <div class="caption center">Centered Text</div> </div> </body> </html>
Class Utility Pattern
.caption- Base Style (ฟอนต์ ขนาด น้ำหนัก).TL, .TR, .BL, .BR, .center- Positioning Classes- รวมใช้ได้:
class="caption TL"= Base + Top Left - Pattern นี้ใช้ได้ทั่วไป (OOCSS/BEM)
จัดกึ่งกลางแท้จริง
.center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
Transform -50%/-50% ย้ายกลับครึ่งขนาดตัวเอง -> จดจุดกึ่งกลางพอดี
ผลลัพธ์
รูปเดียว แสดงข้อความ 5 จุดพร้อมกัน: 4 มุม + กลาง สีม่วง ตัวหนา
