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

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

2 个答案: