Computer >> Computer tutorials >  >> Programming >> CSS

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>