Stefan Stefko Stefan Stefko - 2 months ago 5x
CSS Question

Floating images

I am creating website with some product images list for my client. In one line i can have only 3 product images and my employer wants to center line of images if it's not full (less than 3 objects).
Of course the easiest way is to implement another class for images in "incomplete" line, but i have to provide website managment to my employer without any programming after all of that, so this solution is not for me ;)

Here is codepen with what i did, but i am still missing something.

I would really appreciate if you would straighten up my JS.

I am also quite afraid about this line:


I heard, that it is not the safest way to work with photos in JS, becouse photos can load after that line and it could get messy.

<a href="#"></a>

will look like:

<a href="some_big_image_in_gallery_overlay.jpg" class="gal">
<img src="some_small_image_on_website.jpg">

Hope that you will help me clear my concerns about img loading and bugged JS code :)


It would be sufficient, to just align the boxes with CSS:

.fruits {
  text-align: center;
.miniImgBox {
  display: inline-block;

Explained: remove the float from your image boxes and set their display to inline-block. This way, you can just apply the text-align: center rule to the container.