Facebook Like图标没有垂直对齐

Question

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

我是否缺少一个简单的解决方案，允许我在桌面和移动设备上显示与文本一致的元素？ My site can be found here，如果有帮助的话。谢谢！

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

<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;

    }