html - Yotpo 小部件中心

Question

我在我的网站上使用 Yotpo 的小部件，并希望将其居中。

它位于 product-list.tpl 中，所以我认为 product-list.css 应该是与 div 对话的 css。

<div class="yotpo bottomLine" 
data-appkey="{$yotpoAppkey}" 
data-domain="{$yotpoDomain}" 
data-product-id="{$product.id_product}"
data-product-models="" 
data-name="{$product.name|escape:'htmlall':'UTF-8'}" 
data-url="{$product.link|escape:'htmlall':'UTF-8'}" 
data-image-url="{$link->getImageLink($product.link_rewrite, $product.id_image, '')}" 
data-description="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}"
data-lang="{$yotpoLanguage|escape:'htmlall':'UTF-8'}" 
data-bread-crumbs=""> 
</div>

我试过这个:

.yotpo_bottomline .{
text-align: center!important;
}

但这并没有真正奏效。

Answer 1

我已经使用内联样式解决了 Shopify 产品系列页面中的问题。

在 <div> 中使用以下代码在来自 Yopto 的主要数据调用之前。填充是可选的，但会与上面的元素增加一个小间隙。

<div style="margin: auto; width: 50%; padding: 5px;" class="yotpo bottomLine"