Facebook Like 图标未垂直对齐

Question

将facebook like 按钮添加到我的页面时，它会与页面正文中的文本对齐，但不会与导航栏对齐，导航栏会比其余文本显示得更高。 我能够通过降低它的相对位置来解决这个问题，但这会导致它在页面的移动版本上显示得更低。

是否有一个我缺少的简单解决方案可以让我在桌面和移动设备上显示与文本一致的元素？ 我的网站可以在这里找到，如果有帮助的话。 谢谢！

编辑：此处为固定位置按钮的代码示例：

<ul class="nav navbar-nav navbar-right">
                    <li><span style="position:relative; top:15px" class="fb-like" data-href="https://www.facebook.com/WarsofLiberty/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false" data-colorscheme="light"></span>
                    <li><a href="index.html"><span>Home <span class="border"></span></span></a></li></li>
                </ul>

Answer 1

这应该有效。

.fb-like {
    vertical-align:middle;
    line-height: parent height;

    }