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

Center AddThis Inline Follow Buttons div

2 个答案: