How to vertically align Facebook and Twitter share buttons

Question

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?

Answer 1

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.