Center Woocommerce star-rating element in Wordpress custom theme

0
votes

I have successfully centred the woocommerce products on my page using css. However, the star-ratings div refuses to center whatever I do to it. I can change its colour and background, so I know that I am referring to the right element. Any help would be appreciated.

CSS:

#top_rated_wrapper ul.columns-4 li.product {
  display:block;
  width:100%;
}

#top_rated_wrapper ul.columns-4 li.product a {
  text-align:center;
}

#top_rated_wrapper ul.columns-4 a {
  text-align:center;
  width:100%;
}

#top_rated_wrapper ul.columns-4 li.product img {
  object-fit:contain;
  object-position:center;
  max-width:100%;
  height:300px;
}

.star-rating {
  float:none;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

The last class reference (.star-rating) doesn't work to center the element. '#top_rated_wrapper' is just my own wrapper around the woocommerce content. I have also tried a straightforward text-align:center.

2
htmlcsswordpresswoocommerce
Add your HTML markup as well. – Rajan Benipuri

2 Answers

1
votes

As per my understanding:
1. check the visual scope of .start-rating class element, if it covers the full width, then
2. check if the .start-rating class element has child elements then make them display:inline-block property. and add text-align:center in .start-rating class.

Hope it may help you.

0
votes

Very late to the party, but try:

.star-rating {
    margin-left: auto !important;
    margin-right: auto !important;
}