- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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>
Updated on 25-Jun-2020 07:11:46
- Related Questions & Answers
- How to position text to top right position on an image with CSS
- How to position text to top left 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 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?
- Set the Background Image Position with CSS
- How to center an element vertically and horizontally with CSS?
- How to create an image overlay zoom effect on hover with CSS?
- Flip an image on mouse over with CSS
Advertisements