Position text on top of responsive mockup image

Question

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 class="flex flex-wrap w-full justify-center content-center px-12">
    <div class="flex flex-wrap lg:items-center min-h-screen">
        <div class="flex flex-col w-full lg:w-1/2 justify-center">
            <img src="https://i.imgur.com/sb5Jz5I.png" class="object-contain max-h-full">
            <p id="text">Dynamic text!</p>
        </div>
        <div class="flex flex-wrap w-full lg:w-1/2 justify-center">
            <h3 class="text-3xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
    </div>
</div>

the answer of this question will help you https://stackoverflow.com/questions/1776915/how-can-i-center-an-absolutely-positioned-element-in-a-div — Stamatis Valis, Jul 14 '22 at 06:47

score 1 · Accepted Answer · answered Jul 14 '22 at 07:23

1

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

answered Jul 14 '22 at 07:23

Arman Kazi

159
1
8

This made the most sense for me. Thanks. – tony Jul 15 '22 at 08:46

Boonster · Answer 2 · 2022-07-15T07:00:31.917

 .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;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=content-width, initial-scale=1.0">
  <link rel="stylesheet" href="stylesheet.css">
  <title>Responsive</title>    
</head>

<body>

<div class="pic">
   <img src="https://i.imgur.com/sb5Jz5I.png">
   <div class="box"><p>Dynamic text!</p></div>
</div>

</body>
</html>

I'd downloaded the picture, I've restored it to the external link. I've aligned the box to the left of the magnify glass. If you want it centered, add text-align: center to the .box css. — Boonster, Jul 15 '22 at 07:13

Position text on top of responsive mockup image

2 Answers2