- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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>
- Related Articles
- How to position text to top left position on an image with CSS
- How to position text to top right position on an image with CSS
- How to position text to bottom left on an image with CSS
- How to position text to bottom right on an image with CSS
- How to center an image with CSS?
- Center image using text-align center with CSS?
- Center an image with CSS
- How to place text over an image with HTML and CSS?
- How to create an image with a transparent background text using CSS?
- How to add a navigation menu on an image with CSS?
- How to create an image overlay title on hover with CSS?
- How to place text blocks over an image using CSS?
- How to center an element vertically and horizontally with CSS?
- How to create an image overlay zoom effect on hover with CSS?
- How to create an image gallery with CSS

Advertisements