Center aligning a group of images

[WebNZ]

Hi Everyone,

I’m very new to web design and I’m having a few issues with the layout of a group of four images. You can see what I have done at http://www.loftnz.com.

I have the images grouped and placed nicely but they are not quite centered. As you can see they “pull” slightly to the left. I’m assuming this has something to do with using the “float:left” command? Well that’s my guess….

I have tried many many different things to correct this problem but still it remains. I can post the CSS here if that would help.

Any advice gratefully accepted with thanks.

Kind Regards,

Sean.

[Paulie_D]

I have tried many many different things to correct this problem but still it remains. I can post the CSS here if that would help.

We’d rather you’d make a reduced case example in Codepen. Only include enough HTML & CSS to demonstrate the issue.

If it was me though, I don’t use floats when I know I’m going to be centering elements. I use display:inline-block and text-align:center on the wrapping element.

[WebNZ]

Many thanks. I’ll give it a try. Will post to Codepen once I figure out how the site works.

[__]

Rather than floating your images (which is obviously not what you’re trying to do, here), just usedisplay: inline-block on the figures* and text-align: center on the parent section.

* is there a reason you’re wrapping the images in figures?

edit
Sorry, I just realized that I’m basically just repeating Paulie_D’s advice. Consider it an endorsement.

I seem to be having problems with reading comprehension today…

[WebNZ]

Magic Sudo! Thank you very much. That solved the problem. :)

[Author]

Posts