Вертикальное выравнивание элементов div в элементе списка

Question

У меня есть макет как this.
Как я могу выровнять каждый div.product_image по вертикали в середине <li> элементов, если у меня нет фиксированной высоты элемента списка или изображения, и в то же время убедитесь, что изображения не будут перекрывать друг друга?

Answer 1

Таблица может работать, но вам это не понравится. Тогда JS может помочь. «Обычный» способ сделать это должен будет использовать min-height & min-width в <li>, затем используя 2 divs. 1-й position: absolute; 1px * 1px top:50%;left:50%;, 2-й относительный div left:-Xpx; top:-Ypx; width:2*X; height:2*Y; (< - это будет статический), а затем просто разместите все, что хотите внутри.