Search code examples
csscentering

Group of centered images, last row issue

I am centering a group of images using: DIV Containter: text-align: center; DIV Image: display: inline-block. (No Float)

It works perfectly, but the very last row which is 1 or 2 pixel shifted on the right, not matter how many rows there are (different resolution).

I can't make it work. See pages:

https://www.trampolineandparts.co.uk

https://www.trampolineandparts.co.uk/replacement-parts

Please help. Thank you!

Solution

  • As @Mary pointed out, it's the space between elements. You can just use display: flex on the parent instead, and that will maintain the layout and fix the spacing issue.

    div.imgcnt {
    /* text-align: center; */ /* no longer need this */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* if you want the `.img` elements centered on the page */
}