Плавающие изображения

Question

Я создаю сайт с некоторым списком изображений для моего клиента. В одной строке я могу иметь только 3 изображения продукта, и мой работодатель хочет осевать линию изображений, если он не заполнен (менее 3 объектов). Конечно, самый простой способ - реализовать другой класс для изображений в «неполной» строке, но я должен предоставить управление сайтом моему работодателю без каких-либо программ после всего этого, поэтому это решение не для меня;)

Вот codepen с тем, что я сделал, но я все еще что-то упускаю.

Я был бы очень признателен, если бы вы поправили мой JS.

Я тоже очень боюсь об этой линии:

$(document).ready(function() 

Я слышал, что это не самый безопасный способ работы с фотографиями в JS, becouse фотографии можно загрузить после этой строки, и это может запутаться.

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

будет выглядеть следующим образом:

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

Надеется, что вы будете помогать мне ясно, мои опасениям по поводу IMG загрузки и прослушиваетесь JS код :)

Answer 1

Было бы достаточно, чтобы просто выровнять ящики с помощью CSS:

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

Разъяснение: удалить float из вашего изображения и установите их отображение на inline-block. Таким образом, вы можете просто применить правило text-align: center к контейнеру.

Answer 2

Самый простой способ - использовать display: inline-block; и text-align: center. Попробуйте это:

.fruits { 
    text-align: center; 
} 
.miniImgBox 
{ 
    width: 370px; 
    display: inline-block; 
    min-height: 1px; 
    margin-left: 30px; 
}