How to align Facebook like, Google + and Twitter buttons?

| Web development | 1 seen

CSS

Working on a project I faced a problem how to align social share buttons. By default I'm not paying much attention to this, but there are circumstances you must provide clean work.

So here is the example:

These are social share buttons from my blog, as you can see, Facebook button is not in one line with other lines. To fix this, I did a quick Google search and found great tutorial on Github: 

Here is my Drupal view - containing social share buttons:

<div class="social-share">
<div class="fb-like" data-href="[path]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="Reinis_Fischer">Tweet</a>
<div class="g-plusone" data-size="medium"></div>

<a href="//www.pinterest.com/pin/create/button/?url=[path]&media=[uri]&description=[title]" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>

</div>

Now I just need to add some small CSS code:

/* This gets Google to fall into place */
.social-share {
	font-size: 1px;
}
 
/* This gets Facebook to fall into place */
.social-share iframe {
	vertical-align: middle;
	
}
.fb-share-button{
 margin-right:20px;
}
/* Set an optional width for your button wrappers */
.social-share span {
	display: inline-block;
	width: 110px;
}
 
/* Adjust the widths individually if you like */
.social-share .google {
	width: 75px;
}

And here is the result:

Hope this helps you to align your social share buttons