WooCommerce Product Vendors - Img aligment on Vendor page

I am using the Product Vendors extension from Woocommerce that allows me to have a multi-vendor website. I do not use the default shop page to display products for users. Instead the user selects the store and view products on the vendor's individual page. I am trying to get the product thumbnail image & text center aligned, specifically for mobile devices. I've tried a number of different css recommendations. The closest I've gotten is using:

.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;



This center aligns the text, but not the image. I am wondering how to get the image aligned correctly as well. A link to the page in question is:

https://saskontap.magnaprototype.com/vendor/twisted-tartan/

Thanks for your time.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.