链接中的文本在WordPress中对齐不正确，但在HTML中很好

As you can see in the images, the text "English" isn't vertically centered in the WordPress version of the site I'm building but with the same code as I used in the HTML version it works perfectly. Any ideas why?

HTML

<div class="right-bar">
    <a class="language">
        <img src="img/flags/EN-us.png" alt="English / US">
        <span>English</span>
    </a>
    <a class="search-btn">
        <i class="fa fa-search"></i>
    </a>
</div>

SASS

.right-bar {
        background: #1f1f1f;
        float: right;
        height: 100%;
        padding: 32px 20px 0;
        position: relative;

        &::after {
            position: absolute;
            top: 0;
            right: 100%;
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 98px 83px;
            border-color: transparent transparent #1f1f1f;
        }

        .language {
            border: 1px solid #363636;
            border-radius: 40px;
            color: #898989;
            display: block;
            float: left;
            height: 34px;
            font-size: 10px;
            font-weight: 700;
            line-height: 30px;
            padding: 0 20px;
            position: relative;
            text-transform: uppercase;
            z-index: 99;
        }

        .search-btn {
            float: left;
            display: block;
            margin: 0 0 0 30px;
            color: #fff;
            font-size: 26px;
            font-weight: 400;
            transition: color .2s;

            &:active {
                color:#8eb82f;
            }
        }
    }

SCSS

.language{
  img{
  vertical-align:middle;
  }
}

This may help you.