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

我试图垂直对齐生成的Facebook“分享”按钮和Twitter的“推”按钮，但我似乎无法做到这一点。我已经包含了一个代码片段，但由于某种原因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>

来源

2016-01-02 Michael LB

对齐是问题还是Facebook按钮没有显示的事实？标题和内容之间有区别...我想这种对齐方式很好。 –

只需对齐，Facebook按钮就会显示在我的网站上。如果您查看我的网站，您会看到我的意思，“Tweet”按钮高于“共享”按钮（反之亦然）。 –

它通过使用除了使用vertical-align:middle财产top移动Facebook的按钮有点可能。

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

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

来源

2016-01-02 18:25:40 shadeed9

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

回答

相关问题