3

我正在尝试对齐在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 按钮的右侧应该有一个计数器，但没有。如果有人知道为什么会这样，请告诉我。

有什么建议么？

谢谢，克里斯

4

2 回答 2

4

您正在使用小部件按钮上的计数器。它们需要一些额外的增长空间，并且由于它们用作 iframe，您无法修改它们的样式。

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

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

.socialheader a {
    float: none !important;
}
于 2013-02-03T02:33:51.270 回答
1

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

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

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

div.addthis_toolbox.addthis_default_style {
    margin: 0 auto;
    width: 180px;
}
于 2017-11-27T21:45:50.130 回答