Để căn giữa văn bản trên một hình ảnh, sử dụng thuộc tính transform trong CSS. Bạn có thể chạy đoạn mã sau để đặt văn bản ở giữa hình ảnh:
Ví dụ
<!DOCTYPE html> <html> <head> <style> .container { position: relative; } .topleft { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px; } img { width: 100%; height: auto; opacity: 0.3; } </style> </head> <body> <h2>Image Text</h2> <p>Add some text to an image in the center of an image:</p> <div class = "container"> <img src = "trolltunga.jpg" alt = "Norway" width = "1000" height = "300"> <div class = "topleft">Center</div> </div> </body> </html>