Как правильно выровнять социальные кнопки "AddThis" с помощью CSS

Question

Я пытаюсь настроить кнопки социальных сетей в верхней части http://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;
}

Я не могу понять, что я делаю неправильно: /

В идеале эти виджеты должны быть аккуратно соединены и центрированы по центру страницы. Также стоит отметить, что кнопка интереса должна иметь счетчик справа от нее, но не имеет. Если кто-нибудь знает, почему это происходит, дайте мне знать.

Какие-либо предложения?

Спасибо Крис

Answer 1

Вы используете счетчики на кнопках виджета. Они требуют некоторого дополнительного пространства для роста, и так как они используются в качестве фреймов, вы не можете изменять их стили.

Я предлагаю вам показывать простые кнопки без счетчиков или располагать виджеты вертикально, чтобы дополнительное пространство справа не было проблемой дизайна.

ОБНОВЛЕНИЕ: виджеты не центрируются для вас, потому что стили виджетов перемещают их влево. Вы можете сделать это, чтобы переопределить:

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