[Resolved] text under image

[Brian]

Hi,

Is it possible to have text under an image to be the same width as the image? the image is 768px wide. I have tried max- width but I can’t get it to centre for me, even though I use the text-align attribute. I would appreciate the help.

Kind Regards,

Brian Thompson

[David]

Hi there,

you have an opening DIV: <div align="center">
Change that to: <div class="custom-container">

Then add this CSS:

.custom-container {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.custom-container img {
    width: 100%;
}

The second part of the CSS is to make your images respond to screen size changes.

[Brian]

Hi David,

Thank you very much! I didn’t know what to do. One question though, what is meant by the auto attribute?

[Leo]

See explanation here:
https://www.w3schools.com/css/css_margin.asp

In this case it just centers the element.

[Brian]

Thank you Leo, I have seen it in use on other sites but I didn’t really know what it meant.

Kind Regards,

Brian Thompson

[Leo]

No problem 🙂

[Author]

Posts