Product Landing Page help with formatting

HTML-CSS
1

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.

https://codepen.io/Throssell/pen/rgPVyj

2

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="https://previews.123rf.com/images/margo555/margo5551209/margo555120900009/15381710-tea-leaves-and-dried-tea-on-a-wooden-spoon-on-white.jpg" /img>
  <div class="top-left">
    ...the text content
  </div>
</div>

.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
3

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