Woocommerce: Как выравнять картинки товаров?

Здравствуйте! Как настроить страничку товаров (Shop Page). Товар на различных разрешениях отображается столбцом. Товар должен располагаться по центру страницы. Как хотелось бы я обозначил красными квадратами (см ниже).

Пробовал в css писать

.products li {

vertical-align: top;

display: inline-block;

}

ul.products {

text-align: center;

}

При высоких разрешениях он отображается:

1 2 3

4 5 6

- 7 -

а хотелось бы:

1 2 3

4 5 6

7 - -

и вроде бы решает мою проблему, но не совсем. Например при 480x800 (см. картинку ниже) он все равно отображается в один столбец.

При разрешении 320x480

Товар не по центру страницы.

При разрешении 480x800

(скрин без выравнивания по центру) Тут при казалось бы большом разрешении и свободного пространства почему то отображается в один столбец.

При разрешении 768x1280

Товар не по центру страницы

Помогите, пожалуйста. Как вывести товар блоками да еще и по центру >? ) С какими параметрами в css нужно "играть" ?

нужно ли дописывать правила в @media screen and... ?