无法水平对齐社交按钮

Question

首先，在有人将此问题作为“精确副本”关闭之前，我搜索了网站并回答，但找不到任何有用的内容：）

我有一个网页，其社交栏在其首页看起来有点像Bootstrap社交栏。我的网站使用Bootstrap作为网站模板。

我的社交按钮问题。我添加了Google+，Twitter和Facebook按钮，现在我正在努力正确对齐...感谢Facebook按钮。

我使用的代码与3个社交网络中的官方代码完全相同，我将每个按钮放在<li>的{​​{1}}中（再次参考Bootstrap前面页面的例子）。注意：我添加了一些背景颜色和一些填充以使事情清楚。

结果是你在下面看到的图像（从IE屏幕截图）。如果Facebook让事情变得艰难，那么Google+和Twitter的播放效果会很好......或者它恰恰相反？

在我用于测试的所有浏览器（IE，Firefox，Chrome和Opera）中都有相同的行为

更新：访问此Fiddle即可查看示例。

Answer 1

首先，LI的高度不一样--G +和Twitter都是25px，FB就像按钮只有22px。通过在样式表中为它们添加height:25px，使所有LI的高度相同。

之后，只需为LI设置vertical-align:middle，它们应该很好地对齐。