- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to position text to center on an image with CSS
To positioned text to center an image, use the transform property in CSS. You can try to run the following code for centered text over an image
Example
<!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>
Advertisements