Question

我正在尝试调整dirtycookie.co

顶部的社交媒体按钮

它们正确对齐，但它们之间有一堆间距。

我的HTML：

<div class="grid_12 socialheader">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style" style="text-align:center;">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:url="http://www.facebook.com/TheDirtyCookie"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:url="http://www.dirtycookie.co" pi:pinit:media="http://distilleryimage6.s3.amazonaws.com/1bf5b1a46d0b11e2914122000a9f1439_6.jpg" pi:pinit:layout="horizontal" always-show-count="1"></a> 
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> 
<a class="addthis_counter addthis_pill_style"></a>
</div>
<!-- AddThis Button END -->
</div>

我的CSS：

.socialheader {
    width: 100%;
    margin: 3px 1px 0px 1px;
    text-decoration: none;
}

.socialheader a{
    padding: 0px 10px 0px 20px !important;
    margin: 0px !important;
    width: 50px !important;
    display:inline !important;
    text-align: center;
    float: center !important;
    position:relative !important;
    top:0px !important;
}

我无法弄清楚我做错了什么：/

理想情况下，这些小部件将紧密结合在一起并位于页面中间。同样值得注意的是，pinterest按钮应该有一个右侧的计数器，但不是。如果有人知道为什么会这样，请告诉我。

有什么建议吗？

谢谢，克里斯

Answer 1

您正在使用窗口小部件按钮上的计数器。他们需要一些额外的空间来增长，因为他们被用作iframe，你无法修改他们的风格。

我建议您显示没有计数器的普通按钮或垂直堆叠小部件，以便右侧的额外空间不是设计问题。

更新：窗口小部件不以您为中心，因为窗口小部件样式将它们向左浮动。您可以这样做以覆盖：

.socialheader a {
    float: none !important;
}

Answer 2

我有一个类似的问题，让图标居中对齐。我添加了以下CSS类，它对我有用：

div.addthis_toolbox.addthis_default_style {
    display: flex;
    justify-content: center;
}

对于旧版浏览器，您还可以尝试：

div.addthis_toolbox.addthis_default_style {
    margin: 0 auto;
    width: 180px;
}

如何正确地将“AddThis”社交按钮与CSS对齐

2 个答案: