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
Live Demo
<!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>
Published on 24-May-2018 16:14:33
