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
<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>
...the text content
Then center the .top-left div like this.
transform: translate(-50%, -50%);
Thank you! I will try this later tonight