1

I'm trying to center the image vertically, on woo-commerce, i tried vertical align , min height, but nothing is working, maybe i am picking something wrong and i cant notice it? For example i want "ARZ" image to be in the middle not to the top. Here is the link:

https://carloshaidamous.com/product-category/prints

.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail.wp-post-image {
  vertical-align: center;
}

Thank you in advance

Ruvee
  • 8,611
  • 4
  • 18
  • 44
Rita
  • 37
  • 6

1 Answers1

1

You need to set height to .products li, then add the following styles to each anchor tag within li element.

.woocommerce-LoopProduct-link{
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}

You can also check out https://masonry.desandro.com/ , if that's what you want.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Khalil
  • 1,495
  • 6
  • 14
  • worked perfectly but now the title is on the right side instead of bottom – Rita Jul 13 '20 at 16:19
  • give the `anchor` tag `flex-direction: column`. You also may need to adjust the top margin of the `ul`. – Khalil Jul 14 '20 at 04:02