如何透過 CSS 將文字定位到影像中央
若要將文字定位為影像上的中心位置,請在 CSS 中使用 transform 屬性。你可以嘗試執行以下程式碼,以將文字置中在影像之上
示例
<!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>
廣告