Блог

Главная - Вопросы по программированию - Yotpo центр виджетов

Yotpo центр виджетов

#html #css #center

#HTML #css #центр

Вопрос:

Я использую виджет от Yotpo на своем веб-сайте и хотел бы расположить его по центру.

Он расположен в product-list.tpl, поэтому я подумал, что product-list.css должен быть css для взаимодействия с div.

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

Но на самом деле это не сработало.

Комментарии:

1. Используйте firebug, чтобы увидеть, какой класс css или идентификатор влияют на ваш div. Редактировать: в вашем 2-м поле кода; перед { есть точка, удалите ее и повторите попытку. Редактировать 2: о, ну, ваше имя класса css неверно. В вашем 1-м поле кода вашему div назначены 2 класса: yotpo и bottomline. Это разные классы. Вы назначили новый класс в своем CSS с именем: yotpo_bottomline. Вот почему вы не можете разговаривать с div.

2. Спасибо за ответ. Я удалил «.», а также попробовал .yotpo и .bottomLine с помощью text-align: center; (с и без !важно) никто из них ничего не изменил в расположении divs.

3. Содержит ли ваш div текст или изображение?

4. Это файл .css всего плагина yotpo: staticw2.yotpo.com/2Yf4sKFkGM33aigqEq1mGBD91r3nsGloU8qhMQEp/… Он в основном содержит текст и «изображение», он просто показывает отзыв о продукте в звездах и сколько отзывов он получил. Но я понятия не имею, как называется div. evoxity.net — это веб-сайт. И первый продукт получил обзор, поскольку вы можете видеть его на левом сайте, а не по центру

5. div.yotpo.bottomLine { ширина: 165px; поле: 0 авто; } исправил это

Ответ №1:

Я использовал встроенный стиль для решения проблемы на страницах нашей коллекции Shopify.

Используйте следующий код в <div> , предшествующем основным вызовам данных из Yopto. Заполнение необязательно, но добавляет небольшой пробел от элемента выше.

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