How to properly align social "AddThis" buttons with CSS
I am trying to align social media buttons visible at the top of dirtycookie.co
They are aligned correctly, but there are some spacing between them.
My 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>
My 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;
}
I cannot figure out what I am doing wrong: /
Ideally, these widgets will be tightly connected and centered in the middle of the page. It's also worth noting that the pinterest button should have a spinner to the right of it, but it doesn't. If anyone knows why this is happening, let me know.
Any suggestions?
Thank you, Chris
source to share
You use counters on widget buttons. They require some extra space to grow, and since they serve as frames, you cannot change their styles.
I suggest you show simple buttons without counters or stack widgets vertically so that extra space on the right is not a design issue.
UPDATE: the widgets are not centered for you because the widget styles float to the left. You can do this to override:
.socialheader a {
float: none !important;
}
source to share
I had a similar problem getting the icons to be centered. I added the following CSS class and it worked for me:
div.addthis_toolbox.addthis_default_style {
display: flex;
justify-content: center;
}
For older browsers, you can also try:
div.addthis_toolbox.addthis_default_style {
margin: 0 auto;
width: 180px;
}
source to share