Center text over image

Have you ever wanted to overlay text on an image? It’s really handy to do in CSS and HTML rather than photoshop, and saving and uploading different versions every time you change the text.

Here’s what the output of this lesson looks like:

center-text-over-image

 

 

 

 

 

 

 

As for HTML, it’s very simple.

One div with the image as a background, with a paragraph inside.

This is the code for the image container. We set the image as the background for the div. Next, I’m hardcoding the width and height for the div. To center the text, I’m using the display:flex or flexbox css code. align-items:center and justify-content:center to keep the text in the perfect middle of the image.

 

None of the following is needed, it’s just to help the formatting:

I’ve set the width and added some padding around the edges. The background I set to white to help make it readable. Add a bold 12px font size and bold and that’s it!

Here’s a jsfiddle link so you can play with the code right away.

 

Questions