How to align Facebook and Tweet buttons?

问题

The Facebook and Tweet buttons on our home page are vertically misaligned, and we're confused why. We can top align the two buttons if we use Firebug and remove the height for the Tweet button. However, the height is set dynamically, and inlined, from a Twitter script. We can't seem to override the height value.

Here's the home page: http://www.panabee.com

Are we doing something wrong in the CSS? Or is there a parameter we need to set in the Tweet button to override the height value?

Our only other option is to resort to the Twitter iFrame for the Tweet button, which we prefer not to do.

Thanks!

回答1:

Just add:

height:63px; to the class of the FB iFrame in CSS:

回答2:

Simply add this CSS: .twitter-share-button { vertical-align:top }.

回答3:

To solve the default style

    <span style="vertical-align: bottom">

can be fixed by seting

    .fb-like {
        line-height: 0.7
    }

or

    .fb-like span {
        position: relative;
        top: -7px
    }

in your CSS

来源：https://stackoverflow.com/questions/5252323/how-to-align-facebook-and-tweet-buttons