如何垂直对齐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>

虽然它们的大小几乎相同，但一个看起来比另一个更高。它们还似乎忽略我应用于链接元素的任何CSS规则。有人知道如何覆盖这些元素的CSS并使它们并排垂直对齐吗？

- Nuno Santos

---

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

Answer 1

我曾经遇到同样的问题。Facebook使用一个内联标签将文本设置在底部，导致它在Twitter和Facebook下面呈现。我的解决方案是在实际的按钮调用后面放置CSS来覆盖它。效果很好：

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

这个调用修改了Facebook自己的CSS样式。

- Gustavo Litovsky

---

添加 margin-right: 3px;，右侧的 Twitter 就完美了。 - Alfred Wallace

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

可能需要根据按钮的风格/大小和未来的更改情况来调整“top”值。

附注：我知道这是一个老问题，但谷歌很喜欢它。。

- cytofu

---

我选择了-6像素，但是做得很好。我厌倦了修复这样的东西。我还记得div比li标签更有效，特别是当Pinterest和其他内容混合在一起时。 - Muskie

Answer 3

正确的答案在这里

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

- Marie

---

哦...你在哪里添加这段文字？ - Sophia_ES

Answer 4

我通过给第一个Facebook span添加 !important 样式来使其对齐，以覆盖其内联样式。

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

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

- Hugh Wormington

Answer 5

这对我有用，加入了我的自定义CSS。

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

- Stuart