CODEWITHSUNDEEP
htmlcss
Rahul Kapoor
Rahul Kapoor

Reputation: 145

How to align facebook and twitter share buttons side by side?

i am currently having problem aligning facebook share button and tweet button with each other as i am weak in CSS. here is my code:

<div class="fb-share-button" data-href="http://www.hootpile.com/<?php echo $username; ?>" data-layout="button"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="" data-text="check out my profile on Hootpile" data-via="hootpile" data-count="none">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

But they don't seem to align themselves with each other.

Upvotes: 0

Views: 3225

Answers (3)

aorfevre
aorfevre

Reputation: 5064

Your problems is linked to the structure. One is a DIV and the other a A link.

You shall place both of then into a li list See exemple bellow, just adapt the img uri & destination linked 

.social-icon-fb {
  background: url('../images/social-icon-fb.png') no-repeat;
  width: 42px;
  height: 42px;
  display: block;
}
.social-icon-twitter {
  background: url('../images/social-icon-twitter.png') no-repeat;
  width: 42px;
  height: 42px;
  display: block;
}
<ul class="list-inline">
    <li>
        <a href="https://www.facebook.com/">
            <span class="social-icon-fb"></span>
        </a>
    </li>

    <li>
        <a href="https://www.twitter.com/">
            <span class="social-icon-twitter"></span>
        </a>
    </li>

</ul>

Upvotes: 3

Julian Dormon
Julian Dormon

Reputation: 1779

Adding the following CSS class to your page should work. If you're placing the two buttons side-by side in a containing div.

.fb_iframe_widget {
   vertical-align: top;
 }

Upvotes: 2

nlangerdev
nlangerdev

Reputation: 132

Have you tried applying the style

display: inline-block;

If you apply the css to both class for the buttons then you should be able to get them to align..

please take a look at my jsfiddle for a css solution

https://jsfiddle.net/digitaliss/koo6o16n/

Upvotes: -1

Related Questions