Product Landing Page help with formatting

Hey guys,

I am trying to get my text centered nicely in the middle of my transparent image and I am having a difficult time. Nothing I have tried is getting it positioned correctly. I am fairly new to coding so I am unsure of how to move forward… Any help would be greatly appreciated!!

Here is the link to my codepen.

If you want to keep using positioning for it. Give the image and .top-left div a container and set it to position: relative.

<div class="product-info">
  <img class="tea" src="" /img>
  <div class="top-left">
    ...the text content
.product-info {
  position: relative;

Then center the .top-left div like this.

.top-left {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
1 Like

Thank you! I will try this later tonight :slight_smile: