CODEWITHSUNDEEP
css
Nuno Santos
Nuno Santos

Reputation: 1478

How to vertically align Facebook and Twitter share buttons

I need to vertically align the Facebook and Twitter share buttons. This is how I render them:

<a name="fb_share" type="button" share_url="http://www.livkontrol.com/blog?id=1"></a>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>

Even though they are almost the same size, one appears much on higher than the other. They also seem to ignore any kind of CSS rule I apply to the link element. Does anyone knows how to override the CSS of these elements and have them vertically aligned side-by-side?

Upvotes: 14

Views: 12005

Answers (5)

Stuart
Stuart

Reputation: 146

This worked for me, added to my own css.

.fb_iframe_widget span{vertical-align:inherit !important;}

Upvotes: 1

Gustavo Litovsky
Gustavo Litovsky

Reputation: 2487

I've had the same issue. Facebook uses an inline tag that sets the text on the bottom, causing it to render below twitter and facebook. My solution is to override it by placing CSS after the actual button call. Works nicely:

<style media="screen" type="text/css">
        .fb_iframe_widget span 
        {
            vertical-align: baseline !important;
        }
        </style>

The call modifies facebook's own CSS style.

Upvotes: 41

Marie
Marie

Reputation: 89

The correct answer is here

style="height:20px; vertical-align: top;"

Upvotes: 8

Hugh Wormington
Hugh Wormington

Reputation: 305

I got it to align by styling the first Facebook span with !important to override its inline style:

.fb-like > span {
  vertical-align: baseline !important;
}

Tho I'm not sure if this will work on all browsers.

Upvotes: 3

cytofu
cytofu

Reputation: 903

the answer provided by Marie doesn't seem to work anymore.

For me this does the trick:

html:

<ul class="social">
    <li> put button markup here </li>
    <li> and next button </li>
    ...
</ul>

css:

.social li{
    display:inline;
}  


.fb-share-button{
    position:relative;
    top:-7px;
}

it might be neccesary to adjust the value for top, depending on the button style/size, future changes.

ps: I know this is an old question, but google likes it..

Upvotes: 13

Related Questions