如何垂直对齐Facebook和Twitter共享按钮

Question

我需要垂直对齐Facebook和Twitter共享按钮.这就是我渲染它们的方式:

<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>

即使它们的大小几乎相同,但其中一个看起来比另一个高.它们似乎也忽略了我应用于link元素的任何CSS规则.有谁知道如何覆盖这些元素的CSS并让它们垂直对齐并排？

Answer 1

我有同样的问题.Facebook使用内联标签设置底部的文本,使其在twitter和facebook下面呈现.我的解决方案是通过在实际按钮调用后放置CSS来覆盖它.很好地工作:

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

该调用修改了facebook自己的CSS样式.

Answer 2

玛丽提供的答案似乎不再起作用了.

对我来说这就是诀窍:

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;
}

调整顶部的值可能是必要的,具体取决于按钮样式/大小,未来的变化.

ps:我知道这是一个老问题,但谷歌喜欢它..

Answer 3

正确的答案在这里

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