如何在“特色产品”小部件的主页上将内容居中

Question

我正在尝试将一些内容居中。我已经检查了这些元素，但无法弄清楚如何向自定义 CSS 添加正确的更改。我使用的是小部件简码，因此无法在 Elementor 文本编辑器中直接编辑它。

我在 WordPress 中并使用 Elementor 作为我的页面 builder.I 尝试了一个通用的“div”行，但是它以主页上的几个内容为中心。我希望将星级评分和“添加到购物车”按钮居中。感谢您的任何建议。刚开始使用代码，感觉我几乎没有想念它，但仍然想念它。

Featured Products Widget

这是我用来居中产品标题和价格的。

.woocommerce-loop-product__title, h {text-align: center;}

span.price, h
{text-align: center;}

将鼠标悬停在其中一个元素上时显示 -

div.star-rating::before

Answer 1

我不是 CSS 方面的专家，但我认为您可以将其用于 Stars。

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

您可以将其用于添加到购物车按钮

.woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button {
    margin-top: .5em;
    margin-bottom: .5em;
    white-space: normal;
    line-height: 1.3;
    margin-left: 4em;
}

这就是我的样子。

如果对你有帮助，别忘了标记答案哦

如何在“特色产品”小部件的主页上将内容居中

How can I center content on my Home page in the Featured Products widget

css

wordpress

woocommerce

elementor