Currently, I am working on positioning text on top of an image and centering it within the parent div. You can see the desired design in the screenshot below:
https://i.sstatic.net/NNidz.png
After experimenting with code and using z-index to layer the text over the image, I have successfully achieved that. However, I am now faced with the challenge of centering the text inside the parent div according to the design.
Here is the code snippet I am using:
<div style={{ display: `flex`, flexDirection: `column` }}>
{/* image and title */}
<div>
<StaticImage
src="../images/home.png"
width={1000}
quality={100}
formats={["auto", "webp", "avif"]}
alt="home image"
style={{ marginBottom: `1rem`, zIndex: `1` }}
/>
<div style={{
position: `absolute`,
top: `50%`,
left: `50%`,
transform: `translate(-50%, -50%)`,
zIndex: `2`,
display: `flex`,
justifyContent: `spaceBetween`,
flexDirection: `row`
}}>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Gareth</h1>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Veale</h1>
</div>
</div>
</div>
However, I have noticed that the text appears centered on the entire page. I suspect this might be due to the 50% values for the top and left properties?