Position text on top of responsive mockup image-CodePudding

I am trying to position text on top of this responsive mockup image. The text is supposed to go in the white search bar, but since it is responsive I am having trouble lining it up and having it scale accordingly.

How can I get ensure the text is always centered in the white rectangle search bar and scale with the image responsively?

p{
        z-index: 100;
        position: absolute;
        color: black;
        font-size: 24px;
        font-weight: bold;
        left: 200px;
        top: 300px;
    }

<script src="https://cdn.tailwindcss.com"></script>
<div >
    <div >
        <div >
            <img src="https://i.imgur.com/sb5Jz5I.png" >
            <p id="text">Dynamic text!</p>
        </div>
        <div >
            <h3 >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
    </div>
</div>

CodePudding user response：

I think this is not an efficient way to do this work, the text can't always align to the search box because the size of the image is going to change on different screen sizes, after which the text will be at different positions. I will suggest making that mobile screen with CSS along with a search bar, that will be perfect

CodePudding user response：

This keeps the text inline with the box and is responsive.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=content-width, initial-scale=1.0">
  <title>Responsive</title>  
<style>
    .pic {  
        height: auto;
        position: relative   
    }
        .box {    
        width: 70%;
        margin-left: 19%;          
        position: absolute;
        top: 28.8%;         
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);         
    }
    img {
        width: 100%; 
        position: relative
    }
    p{ 
        color: black;
        font-size: 6vw;   
        font-weight: bold;
        left: 200px;
        top: 300px;
    }
    </style>
    
</head>

<body>

<div >
   <img src="sb5Jz5I.png">
   <div ><p>Dynamic text!</p></div>
</div>

</body>
</html>