Я использую расширение Product Vendors от Woocommerce, которое позволяет мне иметь веб-сайт для нескольких поставщиков. Я не использую страницу магазина по умолчанию для отображения товаров для пользователей. Вместо этого пользователь выбирает магазин и просматривает товары на отдельной странице продавца. Я пытаюсь выровнять миниатюру изображения и текстовый центр продукта, особенно для мобильных устройств. Я попробовал несколько различных рекомендаций CSS. Самое близкое, что я получил, использует:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
text-align:center;
}
.woocommerce .products .star-rating, .woocommerce-page .products .star-rating {
float:none;
display: block;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}
Этот центр выравнивает текст, но не изображение. Мне интересно, как правильно выровнять изображение. Ссылка на данную страницу:
https://saskontap.magnaprototype.com/vendor/twisted-tartan/
Спасибо за ваше время.