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

| Web development | 6 seen

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="" class="twitter-share-button" data-via="Reinis_Fischer">Tweet</a>
<div class="g-plusone" data-size="medium"></div>

<a href="//[path]&media=[uri]&description=[title]" data-pin-do="buttonPin" data-pin-config="none"><img src="//" /></a>


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;
/* 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