How do I align text with images above it?

[RedCoder]

Question:
How do I align text with images above it?

Repl link:
Estus on Replit

[KAlexK]

The alignment of text or other elements is done through the css style text-align, which can be these values: center, justify, left (start), right (end), inherit. The property is applied to the parent element.

text-align - CSS: Cascading Style Sheets | MDN

[RedCoder]

I apologize – I should have been more clear. Here’s a image to help:

[KAlexK]

Maybe put images and text in containers?
The first image in one container with its signature, the second image with a second signature, etc. And apply the text-align: center property to these containers.

[RedCoder]

I thought about this, but i’dl ike to have the images have a image background behind them, and the text to have a colored background, and if I make them all one section, I can’t do this.

[KAlexK]

Please give a link to the page where you want to implement this.

[RedCoder]

Estus (redcoder.repl.co)

[KAlexK]

If you do this, then I can’t even imagine how your site will look on mobile devices…

[RedCoder]

I added the below code to make it not show up in a row, but a column when the width of the screen is too small.

/* Mobile Layout */
@media screen and (max-width: 600px) {
  section.collage-cotnainer-2 {flex-direction: column;}
}

[KAlexK]

What I noticed: the image container has a fixed width, and the text container does not have a fixed width.

In order for the text to be exactly under the images, it is necessary to make sure that each container has a fixed width equal to the width of the container with the image + the outer indent of the container with the image.

Additional css styles:

div.collageTxt {
    width: 310px;
}

[RedCoder]

Thanks so much for the help!