CODEWITHSUNDEEP
htmlcss
stacking
stacking

Reputation: 33

Center align facebook share button div

this is something I thought would be straightforward but turning out to be a bit of a pain. I am trying to center align the Facebook social buttons underneath an icon, you can see it here:

Demo Fiddle

I am a bit stuck for ideas, I have tried forcing it within a div and still will not budge...

 <div class="Facebook"><img src="http://creditworksusa.com/wp-content/uploads/2014/03/facebook-icon-png-white.png" width="30"/>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FRazorRuddockRacing%3Ffref%3Dts&amp;width&amp;layout=button_count&amp;action=recommend&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=637719322983790" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; display: block; margin: 0 auto;" allowTransparency="true"></iframe>
</div>


.Facebook{
    float: left; 
    background-color: #3B5998; 
    width: 50%;
    text-align:center;
    padding: 20px 0;
}

Upvotes: 0

Views: 1649

Answers (3)

yoyo1990
yoyo1990

Reputation: 1

Wrap the iframe into a div and add a margin: auto
to center it without changing the containing div width,
that gives you more freedom to position your element.

.frame{
    display: block;
    width: 100px;
    margin: auto;
}

Upvotes: -1

Thomas Bormans
Thomas Bormans

Reputation: 5362

The Facebook social button is always 124px wide. Just give the iframe a width and center it.

iframe {
    width: 124px;
    text-align: center;
}

http://jsfiddle.net/ak2om8Lh/1/

Upvotes: 3

James
James

Reputation: 3805

Adding this will work:

iframe {
    display: block;
    width: 125px;
    margin: auto;
}

However, as more digits are added to the like, your width would need to get bigger too. This isn't really a great solution, but without setting the width you can't really set margin to auto to get this to work.

Upvotes: 3

Related Questions