居中 AddThis 内联关注按钮 div

Question

我正在尝试将 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，但我认为这不是问题所在。

Answer 1

我在上面询问了有关检查 DOM 树的样式导致左对齐的问题，例如按钮上的浮动。鉴于您的 example，按钮上有一个浮动。确切的 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; 添加到具有类 addthis_toolbox addthis_default_style 的父 div 容器中。然后按钮将居中。

Answer 2

如果 AddThis 决定添加更多以类似方式开始的类（使用 "at"），我将其更改为：

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

居中 AddThis 内联关注按钮 div

Center AddThis Inline Follow Buttons div

html

css

addthis

squarespace