How do I align text with images above it?

How do I align text with images above it?

Repl link:
Estus on Replit

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.

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

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.

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.

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

Estus (

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

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;}

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;

Thanks so much for the help!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.