How do I center text over a background image without moving the image underneath? HTML/CSS

user_16031342 0
Viewed 246

I have an image that is under the background image property and I have some lines of text within that div class. I keep using the margin top property to move the text to center it over the image but it also adds a margin to the image. I tried to use the padding prop but it also stretches the background I put on. How do I center this text without it adding that margin to the image underneath it? Any help appreciated.

centering margin css image html
2 Answers

You can center text using text-align: center, margin: auto. Also, using display: flex; justify-content: center; align-items: center;. If element has absolute positioning it entails another solution. Perhaps, you should align your div, but... Need to clarify with code example for better understanding.

user_73784060

Try something like this

position: absolute;
top: 50%;
left: 50%;

In css file

user_132952940
Related