Wordpress 自定义主题中的中心 Woocommerce 星级评定元素

Question

我已经使用 css 成功地将 woocommerce 产品置于我的页面的中心。但是，无论我对它做什么，星级评分 div 都拒绝居中。我可以改变它的颜色和背景，所以我知道我指的是正确的元素。任何帮助将不胜感激。

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

最后一个类引用（.star-rating）不能使元素居中。 '#top_rated_wrapper' 只是我自己对 woocommerce 内容的包装。我也试过直截了当

text-align:center

.

Answer 1

据我了解：
1.检查

.start-rating

类元素的可视范围，如果覆盖了整个宽度，则
2.检查

.start-rating

类元素是否有子元素，然后将它们设为

display:inline-block

属性。并在

text-align:center

类中添加

.start-rating

。

希望对你有帮助

Answer 2

聚会很晚，但请尝试：

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

Answer 3

这对我有用！

.woocommerce ul.products li.product .star-rating{
    margin-left: auto;
    margin-right: auto;
}

Answer 4

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

工作