Раздел AddThis Inline Follow Buttons по центру

Я пытаюсь центрировать встроенные кнопки отслеживания AddThis. По умолчанию они выровнены по левому краю.

Код для следующих кнопок:

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_inline_follow_toolbox"></div>

Я попытался добавить их в div следующим образом:

<div class="center_aift">
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_inline_follow_toolbox"></div>
</div>

Я добавил следующий CSS, но это не имело значения, они по-прежнему выравниваются по левому краю.

.center_aift {
    width: 100%;
    text-align: center;
}

Я использую SquareSpace с пользовательским блоком кода, но не думаю, что это проблема.


html css addthis squarespace
person user1822824    schedule 20.03.2018    source источник
comment
По умолчанию кнопки установлены на display: inline-block;. Селектор виджета — .at-resp-share-element .at-share-btn. Ваш text-align: center; отлично центрирует их. Я предполагаю, что через SquareSpace добавляются дополнительные свойства, такие как float на кнопках или где-то применяется text-align: left; и т. д. Вы проверяли DOM и работали с иерархией, чтобы проверить стили?   -  person BSK    schedule 21.03.2018

Ответы (2)


arrow_upward
4
arrow_downward

Выше я спрашивал о проверке дерева DOM на наличие стилей, вызывающих выравнивание по левому краю, например, плавание на кнопках. Учитывая ваш пример, на кнопках есть поплавок. Точный CSS:

.addthis_default_style .addthis_separator,
.addthis_default_style .at4-icon, 
.addthis_default_style .at300b,
.addthis_default_style .at300bo, 
.addthis_default_style .at300bs,
.addthis_default_style .at300m {
    float: left;
}

Перезапишите этот стиль на float: none;, а затем добавьте text-align: center; в родительский контейнер div, в котором есть классы addthis_toolbox addthis_default_style. Кнопки будут центрированы.

person BSK    schedule 21.03.2018
comment
Я понял! Спасибо! - person user1822824; 21.03.2018
comment
Рад, что смог помочь! - person BSK; 21.03.2018
comment
Мне пришлось использовать float: none !important;, чтобы это сработало. - person Antônio Medeiros; 10.09.2018
comment
Рад, что нашел это. Я рвал на себе волосы! Спасибо - person Owen Parker; 17.09.2018

arrow_upward
2
arrow_downward

В случае, если AddThis решит добавить больше классов, которые начинаются аналогичным образом (с «at»), я изменил его на это:

.addthis_default_style .addthis_separator,
.addthis_default_style [class^="at"] {
    float: none;
    text-align: center;
}
person dustin555    schedule 12.10.2018