Facebook Like icon not vertically aligned

Question

When adding the facebook like button into my page, it aligns with text in the body of the page, but not the navbar, where it will appear higher than the rest of the text. I was able to fix this by lowering its relative position, but this causes it to display lower on the mobile version of the page.

Is there a simple solution that I'm missing that will allow me to display the element in line with text both on desktop and mobile? My site can be found here , if that helps. Thank you!

Edit: Code example here for the fixed position button:

<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

This should work.

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

    }