如何垂直对齐 Facebook 和 Twitter 分享按钮答案

【问题标题】：How to vertically align Facebook and Twitter share buttons如何垂直对齐 Facebook 和 Twitter 分享按钮
【发布时间】：2017-03-03 13:47:30
【问题描述】：

我需要垂直对齐 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>

尽管它们的大小几乎相同，但其中一个显得比另一个高得多。他们似乎也忽略了我应用于链接元素的任何类型的 CSS 规则。有谁知道如何覆盖这些元素的 CSS 并使它们并排垂直对齐？

【问题讨论】：

你为什么接受这个问题？它没有回答它。

标签： css

【解决方案1】：

我也遇到了同样的问题。 Facebook 使用内联标签将文本设置在底部，使其在 twitter 和 facebook 下方呈现。我的解决方案是通过在实际按钮调用之后放置 CSS 来覆盖它。效果很好：

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

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

【讨论】：

添加一个margin-right: 3px;，它与右边的 Twitter 看起来很完美。

【解决方案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：我知道这是一个老问题，但谷歌喜欢它..

【讨论】：

我选择了 -6px，但做得很好。我厌倦了修理这样的东西。我似乎还记得 div 比 li 标签更有效，尤其是当 Pinterest 和其他标签混在一起时。

【解决方案3】：

正确答案在这里

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

【讨论】：

呃......你在哪里添加这个文本？

【解决方案4】：

我通过使用 !important 设置第一个 Facebook 跨度的样式来使其对齐，以覆盖其内联样式：

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

虽然我不确定这是否适用于所有浏览器。

【讨论】：

【解决方案5】：

这对我有用，添加到我自己的 css 中。

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

【讨论】：