javascript - 内联 CSS 以对齐社交分享图标

Question

我在我的网站上使用 ShareThis 的社交分享按钮。我在使用 Facebook 的 Like 按钮时遇到了一些对齐问题。见截图。

我想对倾斜 CSS 的语法有一些指导，以帮助对齐或填充 Facebook 线条按钮，使其与其他按钮垂直对齐。我尝试了许多不同的组合，包括添加style="padding-bottom:25px"

这是 ShareThis 提供的 HTML 代码：

<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_email_large' displayText='Email'></span>
<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_fblike_large' displayText='Facebook Like'></span>
<span class='st_plusone_large' displayText='Google +1'></span>

将这些行添加到文件底部

<script type="text/javascript">var switchTo5x=false;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-22cc647b-2be-2114-fe32-8c2f8b9ab95e", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

Answer 1

由于所有跨度的最大高度最多为 32px，因此您应该将其添加到样式表中

span {display:inline-block; height:32px; line-height:32px;}

例子

请注意，最好为所有跨度提供一个类，然后对其进行样式设置，而不是像上面那样设置跨度标记的样式

Answer 2

请参阅下面的代码小提琴。你只需要用你的图像替换文本。

<div style="float:left;">  

<span style="display:inline;"></span>                               
<span style="display:inline; "></span>                                    

</div>

在这里看到 js fiddle

Answer 3

将以下代码放在 fb span 上：

style="display: inline-block; height: 32px; line-height: 32px; vertical-align: top;"