如何垂直对齐社交媒体按钮答案

【问题标题】：How to vertically align social media buttons如何垂直对齐社交媒体按钮
【发布时间】：2016-04-06 18:15:42
【问题描述】：

我正在尝试垂直对齐生成的 Facebook 的“分享”按钮和 Twitter 的“推文”按钮，但我似乎做不到。我已经包含了一个代码 sn-p 但由于某种原因 Facebook 按钮不会生成。你可以在我的网站here查看问题。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<div class="socialMediaButtons" style="vertical-align:top;">
<div class="fb-share-button" data-href="https://www.atlasestateagents.co.uk/property-191/residential/for-sale/alexandra-drive-aigburth-l17" data-layout="button"></div>

<a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="https://www.atlasestateagents.co.uk/property-191/residential/for-sale/alexandra-drive-aigburth-l17" data-related="atlasestates" data-hashtags="property">Tweet</a>
</div>

【问题讨论】：

是对齐问题还是 Facebook 按钮未显示的事实？标题和内容之间存在差异......我想对齐效果很好。
只是对齐，Facebook 按钮显示在我的网站上。如果您查看我的网站，您会明白我的意思，“Tweet”按钮高于“Share”按钮（反之亦然）。

标签： html css facebook button twitter

【解决方案1】：

除了使用top 属性稍微移动Facebook按钮之外，还可以使用vertical-align:middle。

.fb_iframe_widget {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    top: -2px;
}

#twitter-widget-0 {
    display: inline-block;
    vertical-align: middle;
}

【讨论】：