如何居中AddThis内嵌关注按钮？默认左对齐问题解决

你已经想到用嵌套div的方式来控制布局，这个思路完全没问题！接下来只需要给这个外层div加上合适的CSS样式，就能轻松实现居中。以下两种方案可以根据实际情况尝试：

方案一：利用文本居中（最常用） #

AddThis生成的内嵌关注按钮容器默认通常是inline-block类型，所以给外层的.center_aift设置文本居中属性，就能让内部的按钮对齐到中心：

.center_aift {
  text-align: center;
  /* 可选：添加上下间距让布局更美观 */
  margin: 1.5rem 0;
}

这个方法简单直接，绝大多数情况下都能生效。

方案二：利用自动margin（针对块级元素） #

如果第一种方案不生效，可能是因为AddThis的按钮容器被设置成了block类型。这时候可以直接给按钮容器设置左右自动margin：

.center_aift .addthis_inline_follow_toolbox {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* 可选：如果按钮宽度不固定，用fit-content让容器自适应内容宽度 */
  width: fit-content;
}

这种方式是让按钮容器自己成为块级元素，通过自动分配左右margin来实现居中，适合按钮容器是块级的场景。

小提示 #

如果遇到AddThis动态加载导致CSS不生效的情况，可以临时用!important强制生效（尽量少用，仅在必要时）：

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

先试试方案一，不行再切换到方案二，应该就能解决你的居中需求啦！

内容的提问来源于stack exchange，提问作者user1822824